Flex не может получить высоту дочернего элемента до высоты гибкого элемента с помощью Epiphany

Question

У меня есть сетка блоков, в которой другие блоки также содержатся в гибких блоках.

Проблема, с которой я столкнулся, заключается в том, что высота игнорируется в элементах flex-элемента сетки в прозрении. Похоже, что отображается правильно с Firefox и хромом.

Результат, который я получил с прозрением: первый блок длиннее двух следующих блоков. В Firefox и Chrome все блоки имеют одинаковую высоту в первом ряду и расходуют соответственно в каждом ряду при необходимости.

.container {
  width: 20rem;
  height: 20rem;
  overflow: auto;
}

.b2 {
  height: 100%;
  background: pink;
}

.widgets {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.widget {
  margin: 1rem;
}

.box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  background: grey;
  width: 4rem;
  height: 100%;
  overflow: hidden;
}

.r1 {
  padding: 0.25rem;
}
.r2 {
  padding: 0.25rem;
  background: red;
  color: white;
}

<div class="container">
<div class="widgets">
  <div class="widget">
    <div class="box">
      <div class="r1">
      asdasdasdasd akjsdha ksjdh askjdh askjdh asd
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="b2">
    
    
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

Хорошо, я нашел проблему благодаря Micheal_B. Проблема в том, что я добавляю дополнительный контейнер, который не является flexbox. Который, кажется, обрабатывается правильно в новых браузерах. Я думаю, это ошибка в незаконченной спецификации flexbox. Так как мой браузер прозрения позволяет только -webkit версия Flex с префиксом, я полагаю, что она основана на проекте flexbox. Это объясняет, почему он работает на Chrome и Firefox.

Как объяснено в этой ссылке: Почему процентная высота не работает на моем div?

Процентная высота пытается получить высоту родительского узла, которая установлена ​​по умолчанию... но высота контролируется макетом flexbox. Я предполагаю, что компоновка flexbox содержит ошибки и неправильно передает высоту субэлементу, что приводит к сбою относительной высоты. Например, если я установлю фиксированную высоту для родительского элемента, он будет работать правильно, потому что flexlayout будет использовать фиксированную высоту.

Тем не менее, я заметил в режиме разработки, что высота гибкого элемента была правильно растянута, в то время как .box элемент не может растягиваться с помощью height имущество. Как предлагается в этом ответе: Chrome / Safari не заполняет 100% высоты родительского элемента flex

Пройдите весь путь, используя flexlayout. Это то, что заставит этот HTML работать нормально. Все, что мне нужно было сделать, это сделать .widget объект flexbox, который потребует, чтобы подэлемент растянулся внутри него и удалил все свойства height css. Тогда браузер будет полагаться только на гибкий макет для установки высоты, за исключением фиксированной высоты, определенной в css.

.widget {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-grow: 1;
  -webkit-flex-basis: 1 ;
  -webkit-align-items: stretch;
  margin: 1rem;
}

.box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  background: grey;
  width: 4rem;
  overflow: hidden;
}

Вот изменения, которые я должен был сделать.