Браузер Microsoft Edge ломает вложенные дочерние флекс - PullRequest
Новая
       35

Браузер Microsoft Edge ломает вложенные дочерние флекс

0 голосов
/ 01 сентября 2018

Я использую flexbox для создания простого и элегантного адаптивного макета на основе flexbox. Вот пример HTML: 

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
  <!-- I can add more sections here,
      to serve as "cards", for example -->
</div>

Вот стили: 

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

Назначение flex-basis: 0; flex-grow: 1; max-width: 100%; - это использование моей таблицы стилей по умолчанию для всех дочерних элементов Flex, так что каждый дочерний элемент Flex будет расти только настолько, насколько это необходимо для содержимого, но при этом заполнять ширину, при необходимости оборачивая. Работает хорошо.

Необязательный flex-basis: auto; flex-grow: 0; предназначен для того, чтобы заставить flex-дочерний элемент расти только по мере необходимости, как и прежде, но не увеличиваться больше, чем, по существу, сжимая гибкий элемент вокруг содержимого.

Я буду использовать <section>, чтобы дифференцировать «карту», ​​которая не увеличивается, если в этом нет необходимости. 

section {
  background-color: white;
  border: 1px solid black;
}

Это прекрасно смотрится в Firefox и Chrome. Но он полностью ломается в Microsoft Edge 42.17134.1.0 (EdgeHTML 17.17134). На Edge <section>, который я использую для карты, полностью сжимается, как если бы я выводил ее из нормального потока. Содержание по-прежнему отображается, полностью за пределами <section>. Вы можете попробовать это здесь:

https://jsfiddle.net/garretwilson/wgo8rqxf/4/

Я могу обойти эту проблему в Edge, изменив свойства flex внутреннего <div> (используя вышеуказанный класс стиля concise): 

<div class="box">
  <section class="box concise">
    <div class="box concise">
      this is just for test
    </div>
  </section>
</div>

Но ручное добавление этого стиля concise нереализуемо. Я не могу вручную изменить дочерние свойства flex, чтобы они не ломались в Edge. Более того, это изменит поведение детей. Если, например, я установлю ширину в <section>, я бы хотел, чтобы его дочерние элементы заполнили пространство.

Это известная ошибка Edge для flex-детей? Разве внутренний <div> не должен расти так, как нужно для его содержания?

И что не менее важно, знает ли кто-нибудь общий обходной путь, который я могу добавить в таблицу стилей, чтобы Edge не сворачивал гибкие элементы в иерархии, без добавления произвольной разметки или стилей в сам HTML

1 Ответ

0 голосов
/ 04 сентября 2018

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

Решение

Не используйте значения без единиц измерения на flex-basis. Это нарушает гибкие макеты в браузерах Microsoft (IE и Edge).

Вместо того, что есть в вашем коде: 

.box > * {
  flex-basis: 0;
}

Используйте это: 

.box > * {
  flex-basis: 0%;
}

Это решает проблему. 

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0%;  /* adjustment */
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

section {
  background-color: white;
  border: 1px solid black;
}
<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
</div>

Объяснение

В соответствии со спецификацией flexbox не должно быть проблем с использованием значений без единиц измерения со свойством flex-basis.

Однако в действительности IE и Edge имеют проблемы с отображением таких значений.

Проблема исследуется в следующих сообщениях:

Следовательно, в качестве безопасной кросс-браузерной альтернативы, работающей в IE и Edge, не используйте значения без единиц измерения в flex-basis. Это относится как к flex-basis, так и к свойствам flex.

...