Flex items drop out of container in ie 11, what's wrong?

Question

css

Problem with the submenu appearing in the "products" menu item. Bug in ie11, everything works fine in Chrome. I found a solution with setting min-width for the .submenu container, but I would like to do it without crutches. Tell me, what's the problem?

the code

<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>