Internet Explorer проблема выбора ширины формы

Question

Я использую простой HTML-код для отображения выпадающего списка. Он работает должным образом в Google Chrome, Firefox и т. Д., Но не работает так, как я хочу, чтобы он был в Internet Explorer. Выпадающий список стал слишком длинным, чтобы его можно было найти в IE.

Я уже пытался указать ширину: 100%; и max-width: 100% от выбранного класса, но это не помогло.

.form-parent {
    .form-container {
        input {
            border-color: $ThemeColorLightGray;
            background-color: $ThemeColorLightGray;
        }
    }
}

.form-container {
    display: inline-block;
    width: 100%;
    padding: 0 0 40px;

    .form-control,
    .base-datepicker[readonly] {
        border-color: $ThemeColorLightGray;
        background-color: $ThemeColorLightGray;
    }
    .form-tooltip {
        display: inline-block;
        position: absolute;
        }
}

.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0;
}

select {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: black;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  cursor: default;
  font: 400 13.3333px Arial;
}

<form method="POST" action="" class="custom-form form-parent js-flex-box">
  <div class="form-container">
    <fieldset>
      <div class="form-group">
        <div class="groupOrder" style="width: 100%; overflow: hidden; background-color: red;">
          <select name="Hotel" placeholder="Vælg hotel" title="Vælg hotel" aria-label="Vælg hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="overflow: hidden !important; float: right;">
            <option value="" selected="selected">Vælg hotel</option>
            <option value="Wakeup Copenhagen">Wakeup Copenhagen, Bernstorffsgade</option>
            <option value="Wakeup Copenhagen, Borgergade">Wakeup Copenhagen, Borgergade</option>
            <option value="Wakeup Copenhagen, Carsten Niebuhrs Gade">Wakeup Copenhagen, Carsten Niebuhrs Gade</option>
            <option value="Wakeup Aarhus, Bruunsgade">Wakeup Aarhus, Bruunsgade</option>
          </select>
        </div>
        <div class="form-tooltip">
          <div style="display: none;">Dette felt skal udfyldes</div>
        </div>
      </div>
    </fieldset>
  </div>
</form>

Answer 1

Я думаю, что вы можете обернуть это в еще один основной контейнер, как я сделал, и это сработало

основные изменения

обернуть в основной контейнер

    <div class='mainCon' style='background-color: red;width: 80%;'> 
     ........
     ........
     ........
    </div>

, а затем вcss

#mainCon
{
  display: block;
  background-color: red;
}

.pham {
    width: 100%;
}

#mainCon
{
  display: block;
  background-color: red;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    }
   
   select {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: black;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    cursor: default;
    font: 400 13.3333px Arial;
}

<div class='mainCon' style='background-color: red;width: 80%;'>

<div class="form-group">


  <div>
  <input type='text'>
  </div>

<div>
  <input type='text'>
  </div>
  <div>
  <input type='text'>
  </div>
<select name="Hotel" placeholder="Vælg hotel" title="Vælg hotel" aria-label="Vælg hotel" class="pham form-control pristine touched" aria-required="true" aria-invalid="false" style="width: 100%;">
    <option value="" selected="selected">Vælg hotel</option>
    <option value="Sample1">Sample 1</option>
    <option value="Sample2">Sample 2</option>
    <option value="Sample3">Sample 3</option>
    <option value="Sample4">Sample 4</option>
  </select>
  <div class="form-tooltip">
    <div style="display: none;">Dette felt skal udfyldes</div>
  </div>
</div>

 <div>
  <input type='text'>
  </div>

<div>
  <input type='text'>
  </div>
  <div>
  <input type='text'>
  </div>

</div>