Текст Flexbox IE11 не переносится в элемент списка

Я столкнулся с проблемой IE11, что текст не переносится, как в других браузерах. Я создал код для этой проблемы.

https://codepen.io/johnny_gruber/pen/QmBePd

HTML

<header>
  <div class = "logo">
    <img src = "https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg" alt = "">
  </div>
  <div class = "search">
      search
  </div>
  <div class = "language">
      DE v
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Product & Solutions</li>
      <li>Industries</li>
      <li>Facilities</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Group Website</li>
    </ul>
  </nav>
  <div class = "login">
    login v
  </div>
</header>

CSS

header {
  display: flex;
  flex-direction: row wrap;
  max-width: 100%;
}

.logo,
.search,
.language,
.login {
  flex-shrink: 0; 
}

ul {
  display: flex;
  float: right;
}

li {
  padding: 25px 15px;
}

nav {
  flex-grow: 1;
  flex-shrink: 1;
}

В chrome вы можете увидеть ожидаемое поведение. Если возможно, текст переносится. В IE11 он просто остается на одной строке. Есть ли шанс добиться такого же поведения в IE11?

Спасибо!

css flexbox internet-explorer-11

04.04.2018 14:53

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

IE 11 requires a unit to be added to the third argument, the flex-basis property

c / o CanIuse.com

Оттуда просто установите ul на display:flex и li, чтобы сказать:

li {
  padding: 25px 15px;
  flex: 1 1 50px;
}

body {
  font-family: Arial;
  font-size: 16px;
}

header {
  display: flex;
  flex-direction: row wrap;
  max-width: 100%;
}

.logo {
  height: 72px;
}

.search,
.language,
.login {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid silver;
}

.logo,
.search,
.language,
.login {
  flex-shrink: 0; 
}

ul {
  display: flex;
  list-style:none;
}

li {
  padding: 25px 15px;
  flex: 1 1 50px;
}

nav {
  flex-grow: 1;
  flex-shrink: 1;
}

<header>
  <div class = "logo">
    <img src = "https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg" alt = "">
  </div>
  <div class = "search">
      search
  </div>
  <div class = "language">
      DE v
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Product & Solutions</li>
      <li>Industries</li>
      <li>Facilities</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Group Website</li>
    </ul>
  </nav>
  <div class = "login">
    login v
  </div>
</header>

Codepen.io Демо

Привет, да, у меня уже было это решение, но проблема в том, что элемент списка теперь растягивается по всей области, а не остается в правом конце, если экран больше.

— 05.04.2018 08:21

04.04.2018 17:09