Ширина без переноса в IE11

В случае, если ширина IE11 не подходит. В случае Chrome ширина правильная, а содержимое завернуто. В случае Chrome полосы прокрутки нет, но в IE11 содержимое не переносилось.

Ожидается: не должно быть полосы прокрутки

   .modal-scroll-panel{
     position:static;
     overflow:auto;
     margin:auto;
     max-width:772px!important;
     max-height:532px!important;
    }
    .width-class{
      width:55%;
    }
    .parent{
      display:flex;
      width:100%;
      flex-flow:column wrap;
    }
    .parent > .item-1{
      display:flex;
      flex-direction:column;
      width:100%;
    }
    .parent > .item-1 > .child-1{
      flex:none;
      width :100%;
    }
    <div class = "modal-scroll-panel">
      <table>
        <tbody>
          <tr>
            <td class  = "width-class">
              <div class = "parent">
                <div class = "item-1">
                  <div "child-1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.   
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

еще одно удивительное: если я удаляю css, связанный с flex, он начинает работать (полосы прокрутки нет, а содержимое правильно обертывается).

Vishal Patil 28.01.2019 12:24

Хотите понять, в чем основная причина, почему в случае flex ширина родительского div неправильная (подробнее).

Vishal Patil 28.01.2019 12:25

Возможный дубликат display: flex не работает в Internet Explorer

Studio KonKon 28.01.2019 12:49

@StudioKonKon, можете указать точную проблему. Это общее утверждение.

Vishal Patil 28.01.2019 12:50

Не напрямую, display: flex;, хотя его можно использовать, он не полностью поддерживается в IE11 и там, где он используется, это очень глючит. Есть обходные пути, но тогда, хотя в IE11 все будет хорошо, у вас возникнут проблемы в Chrome и Firefox. IE11 неправильно устанавливает height, и если вы добавите свойство height, вертикальное выравнивание может перестать работать, или вы можете установить фиксированную ширину.

Studio KonKon 28.01.2019 13:00

Связано: Флексбаги

FelipeAls 28.01.2019 14:39

Связано: Текст в контейнере flex не переносится в IE11

Michael Benjamin 28.01.2019 19:13
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
7
840
1

Ответы 1

flex-wrap не работает с width: 100% в IE. Если вы измените его, например, на max-width:772px, он будет работать.

.parent{
  display:flex;
  max-width:772px;
  flex-flow:column wrap;
}

Другие вопросы по теме