Сделайте так, чтобы вложенные CSS-флексбоксы оборачивали содержимое по вертикали в Edge - PullRequest
Новая
       31

Сделайте так, чтобы вложенные CSS-флексбоксы оборачивали содержимое по вертикали в Edge

0 голосов
/ 06 марта 2019

Я использую CSS flex для достижения следующего макета: - Два «ряда» в контейнере с фиксированной высотой - Первый ряд имеет фиксированную высоту и не растет - Вторая строка занимает оставшуюся доступную высоту (т. Е. Высоту контейнера минус высоту первой строки) и содержит длинный список элементов, которые мне нужны, чтобы заполнить доступную высоту, а затем начать перенос в направлении оси X (с возможным переполнением).

По сути, то, чего я хочу добиться визуально, это: enter image description here

Однако, независимо от того, что я пытаюсь в Edge , я получаю это (содержимое не переносится и вместо этого растягивает высоту): enter image description here Chrome работает нормально и правильно переносится.

Есть ли что-то, что я могу сделать, чтобы добиться этого, не устанавливая высоту для второго ряда? Насколько я понимаю, ряд будет занимать оставшуюся высоту, но не будет расти больше этого, но кажется, что Edge это не нравится. 

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100px;
  border: 2px black dotted;
}

.row-1 {
  border: 1px red solid;
  height: 3em;
  flex: 0 0 auto;
}

.row-2 {
  border: 1px green solid;
  flex: 0 1 auto;
  display: flex;
}

.list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: column wrap;
}
<div class="container">
  <div class="row-1">
   Menu here
  </div>
  <div class="row-2">
       <ul class="list">
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>    
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
       <li>?</li>
      </ul>
  </div>
</div>
...