CSS: неправильная ширина элемента и позиция IE11 (flexbox, position, transform)

Question

Я бьюсь с часами в fly в Inte rnet Explorer 11.

У меня есть header с двумя дочерними элементами. Я отображаю их с flexbox space-between. Второй элемент (справа от заголовка) имеет position relative, а дочерний элемент имеет position absolute. При щелчке я анимирую положение элемента с помощью position absolute, используя transform translateY, чтобы он скользил непосредственно под правым элементом в заголовке. Это работает на всех браузерах, ожидающих IE11, где поле слишком много справа (вертикальное переполнение видно) и где ширина исключает последний элемент.

Когда я использую padding-right: 100px; на элементе .header__selection, выпадающее меню находится справа от области просмотра, а ширина поля охватывает все элементы. Также, когда я удаляю position relative на родительском элементе, ширина поля будет правильной. Я понятия не имею, что здесь не так. Я предполагаю некоторые проблемы с положением и flexbox. Надеюсь на некоторые входные данные.

Используйте фрагмент для тестирования в разных браузерах. Вот скриншот, как это выглядит на IE11:

const selection = document.querySelector('.header__selection');
const flyin = document.querySelector('.header__selection-flyin');

selection.addEventListener('click', function() {
  flyin.classList.toggle('state-header__selection-flyin--open');
});

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header {
  background-color: white;
  border-bottom: 1px solid gray;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  height: 60px;
  width: 100%;
}

.header__selection {
  position: relative;
}

.header__selection-flyin {
  display: flex;
  background-color: lightcoral;
  border: 1px solid black;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  right: 0;
  z-index: -1;
}

.header__selection-flyin-item {
  padding: 5px 10px;
}

.state-header__selection-flyin--open {
  transform: translateY(100%);
  z-index: 1;
  transition: transform 0.3s ease-in-out, z-index 0.3s 0.2s;
}
  

<header class="header">
  <div class="header__logo">Logo</div>
  <div class="header__selection">
    <div class="header__selection-active">
      Selected Item
    </div>
    <div class="header__selection-flyin">
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
    </div>
  </div>
</header>

Answer 1

Я пытался проверить проблему с браузером IE 11, и я могу создать проблему с вашим кодом.

Я пытаюсь проверить код CSS и обнаружил, что если вы измените положение с абсолютное на исправлено в .header__selection-flyin , то проблема может быть решено для браузера IE 11.

 position: relative;
 to
 position: fixed;

Модифицированный код:

const selection = document.querySelector('.header__selection');
const flyin = document.querySelector('.header__selection-flyin');

selection.addEventListener('click', function() {
  flyin.classList.toggle('state-header__selection-flyin--open');
});

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header {
  background-color: white;
  border-bottom: 1px solid gray;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
 
  height: 60px;
  width: 100%;

}

.header__selection {
  position: relative;

}

.header__selection-flyin {
  display: flex;
  background-color: lightcoral;
  border: 1px solid black;
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  right: 0;
  z-index: -1;

}

.header__selection-flyin-item {
  padding: 5px 10px;

}

.state-header__selection-flyin--open {
  transform: translateY(100%);
  z-index: 1;
  transition: transform 0.3s ease-in-out, z-index 0.3s 0.2s;
}

<header class="header">
  <div class="header__logo">Logo</div>
  <div class="header__selection">
    <div class="header__selection-active">
      Selected Item
    </div>
    <div class="header__selection-flyin">
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
    </div>
  </div>
</header>

Вывод в браузере IE 11: