Выпадают флекс элементы из контейнера в ie 11, в чем ошибка?

Question

[dmax1447]

Проблема c появляющимся подменю в пункте меню "продукты". Баг в ie11, в Chrome все работает нормально. Нашел решение с заданием min-width для контейнера .submenu но хотелось бы без костылей сделать. Подскажите, в чем проблема?

код

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

<style>
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  /* блок контейнер навигации */
  .main-navigation {
    background-color: rgb(0, 0, 0);
    font-family: "Roboto";
    align-items: center;
    display: flex;
    justify-content: center;
    padding-top: 5px;
    z-index: 14;
  }

  /* главное меню */
  .menu-main {
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  /* пункт главного меню */
  .menu-item {
    padding: 0;
    position: relative;
    display: block;
    align-items: flex-start;
  }

  /* псевдоэлемент пункта главного меню (для ховера) */
  .menu-item::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
  }

  /* ссылка в пункте меню */
  .menu-link {
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: rgb(214, 214, 214) !important;
    display: block;
    white-space: nowrap;
    font-family: 'Roboto';
    text-transform: uppercase;
    white-space: nowrap;
    padding: 5px 0;
  }

  /* ссылка в пункте меню при наведении */
  .menu-link:hover {
    color: rgb(255, 255, 255) !important;
  }

  /* блок подменю */
  .submenu {
    display: flex;
    padding: 20px;
    background-color: rgb(241, 241, 241);
    font-size: 14px;
    z-index: 14;
    position: absolute;
    top: 45px;
    left: 0;
    visibility: hidden;
    outline: 1px dotted red;
  }

  /* ссылка в блоке подменю  */
  .submenu .menu-link {
    color: rgb(0, 0, 0) !important;
  }

  /* ссылка в блоке меню при наведении */
  .submenu .menu-link:hover {
    color: rgb(26, 26, 26) !important;
  }

  /* блок подменю при наведении на пункт меню */
  .menu-item:hover .submenu {
    visibility: visible;
  }

  /* колонка в подменю */
  .submenu-column {
    list-style: none;
    padding: 0;
    margin-right: 20px;
  }

  /* заголовок колонки в подменю */
  .submenu-column-header {
    font-weight: 700;
  }
</style>

<nav class="main-navigation">

  <ul class="menu-main">
    <li class="menu-item">
      <a class="menu-link" href="#">Продукты</a>
      <ul class="submenu">
        <ul class="submenu-column">
          <li class="submenu-column-item submenu-column-header">
            <a class="menu-link" href="/color">Колонка №1</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/technofruit-color">TechnoFruit Color</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/my-color">My color</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/booster">Booster</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/be-blonde">Be Blonde</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/coactivator">Coactivator cream</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/utils">Utilities</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/passion-colormask">Passion color mask</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/egobond">EgoBond</a>
          </li>
        </ul>

        <ul class="submenu-column">
          <li class="submenu-column-item submenu-column-header">
            <a class="menu-link" href="/care">Колонка №2</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/be-blonde-care">Be blonde</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/botanikare">Botanikare</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/arganikare">Arganikare</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/urban-proof">Urban proof</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/toxkare">B.Toxkare</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/egoliss-care">Egoliss</a>
          </li>

        </ul>
        <ul class="submenu-column">
          <li class="submenu-column-item submenu-column-header">
            <a class="menu-link" href="/style">Колонка №3</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/ht-runway">runway collection</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/ht-create-n-texturize">create & texturize</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/ht-thickening-n-volumizing">thickness & volumazing</a>
          </li>
        </ul>
        <ul class="submenu-column">
          <li class="submenu-column-item submenu-column-header">
            <a class="menu-link" href="/form">Колонка №4</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/egoliss-form">Egoliss</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/plasmante">Plasmante</a>
          </li>
        </ul>
        <ul class="submenu-column">
          <li class="submenu-column-item submenu-column-header">
            <a class="menu-link" href="/man">Колонка №5</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/grooming-for-men">Grooming for man</a>
          </li>
          <li class="submenu-column-item">
            <a class="menu-link" href="/grooming-man-beard">Grooming man & beard</a>
          </li>
        </ul>
      </ul>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="/education">Обучение</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="/collections">Коллекции</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="/company">О компании</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="/contacts">Контакты</a>
    </li>
    <li class="menu-item">
      <a class="menu-link" href="" target="_blank">Магазин</a>
    </li>
  </ul>
</nav>

Comments

[Александр]

Залейте на CodePan

[dmax1447]

Александр, залил
https://codepen.io/dmax1447/pen/qvjRLL
но codepen не работает с ie11
я кажется нашел причину, если убрать у родительского пункта меню position: relative то баг в ie исчезает. но почему так - непонятно

[RAX7]

dmax1447, вот тут можно посмотреть все баги флексов в разных браузерах
https://github.com/philipwalton/flexbugs