Основа Flex 100% в столбце flexbox: полная высота в Firefox, а не в Chrome

Мне нужен столбец divs любого числа, каждый с шириной 100% и высотой 100% от своего родительского div, поэтому сначала он отображается, а остальные переполняют родительский объект вниз. Я установил divs для flex: 0 0 100%;, внутри родительского div с display: flex и flex-direction: column, чтобы достичь этого.

Родительский div сам по себе неизвестной высоты, поэтому он также является дочерним элементом display: flex и flex-direction: column, установленным в flex: 1 0 0, чтобы взять оставшееся пространство в своем контейнере.

В Firefox вывод такой, как мне бы хотелось:

Однако не в Chrome:

Как я могу достичь стиля Firefox в Chrome без Javascript?

Вы можете увидеть это в действии на http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview, а также соответствующую версию с flex-direction: row, которая работает последовательно в обоих Firefox и Chrome.

Для справки, полный CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 200px;
  border: 4px solid green;
  margin-bottom: 20px;
}

.column-parent {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.column-child {
  flex: 0 0 100%;
  border: 2px solid red;
}

и HTML

<div class="wrapper">
  <p>Some content of unknown size</p>
  <div class="column-parent">
    <div class="column-child">
      Should be inside green
    </div>
    <div class="column-child">
      Should be outside green
    </div>
  </div>
</div>

Ответы

Ответ 1

Как указано в ответе Abhitalks, есть ошибка (или другая интерпретация стандарта) в том, как Chrome обрабатывает атрибут высоты здесь.

Я нашел хак, который работает как в Chrome FF, так и в IE

Единственная проблема заключается в том, что у вас было столько правил, сколько у вас есть дети.

Хитрость заключается в том, чтобы задать направление гибкости, установить гибкость (теперь ширину) на 100%, а затем перевести элементы

.container {
    border: solid 2px blue;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filler {
    border: solid 1px black;
    flex: 0 0 80px;
    background-color: lightgreen;
    transition: flex 1s;
}

.container:hover .filler {
    flex: 0 0 40px;
}

.test {
    border: solid 1px red;
    flex: 1 0 25px;
    display: flex;
    flex-direction: row;
    position: relative;
}

.child {
    background-color: rgba(200, 0, 0, 0.26);
    flex: 0 0 100%; 
}

.child:nth-child(2) {
    background-color: rgba(255, 255, 0, 0.48);
    transform: translateX(-100%) translateY(100%);
}

.child:nth-child(3) {
    background-color: rgba(173, 216, 230, 0.28);
    transform: translateX(-200%) translateY(200%);
}

<div class="container">
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="test">
    	   <div class="child">1</div>
    	   <div class="child">2</div>
    	   <div class="child">3</div>
    </div>
</div>

Ответ 2

Кажется, это ошибка в Chrome. Подобно тем, которые описаны здесь (выпуск 428049) и, возможно, связаны с (вопрос 346275).

Это говорит:

- Browsers are supposed to resolve percentages on the flex item child, *if* its flex-basis is definite.
- Gecko is *always* resolving percentages regardless of the flex-basis.
- Chrome is *never* resolving percentages, regardless of the flex-basis.

В общем случае Chrome не разрешает проценты высот на дочернем элементе flex (даже если сам ребенок является гибким элементом), в то время как все остальные браузеры делают.

Это можно продемонстрировать в нижеприведенном фрагменте: (Fiddle here)

* { box-sizing: border-box; margin: 0; padding: 0; }
div.wrap {
    height: 120px; width: 240px; margin: 0px 12px;
    border: 1px solid blue; float: left;
    display: flex; flex-direction: column;    
}
div.parent {
    flex: 0 0 100%;
    border: 1px solid green; 
    display: flex; flex-direction: column;    
}
div.item {
    flex: 0 0 100%;
    border: 1px solid red;
}

<div class="wrap">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
</div>
<div class="wrap">
    <div class="parent">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>

Ответ 3

Мой предыдущий ответ - это взлом, который использует определенную настройку желаемого макета.

Альтернативный способ обхода этой ошибки Chrome состоит в том, чтобы использовать промежуточный элемент в макете и устанавливать этот размер элемента с помощью top: 0px и bottom: 0px. (вместо высоты: 100%). Есть еще ошибка в том, как Chrome обрабатывает исчисление, для которого требуется фальшивая анимация, чтобы заставить ее правильно отрегулировать

.container {
    border: solid 2px blue;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filler {
    border: solid 1px black;
    flex: 0 0 94px;
    background-color: lightgreen;
    transition: 1s;
}

.container:hover .filler {
    flex: 0 0 50px;
}

.test {
    border: solid 1px red;
    flex: 1 0 25px;
    display: flex;
    flex-direction: row;
    position: relative;
}

@-webkit-keyframes adjust2 {
    0% {flex-basis: 100%;}
  100% {flex-basis: 100.1%;}
}
.child {
    background-color: rgba(200, 0, 0, 0.26);
    width:  100%;
    height: 100%;
    flex: 1 0 100%;
    -webkit-animation: adjust2 1s infinite; /* only needed for webkit bug */
}

.intermediate {
    width:  100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    display: flex; 
    flex-direction: column; 
}

.child:nth-child(n+2) {
    background-color: rgba(255, 255, 0, 0.48);
}

.child:nth-child(n+3) {
    background-color: rgba(173, 216, 230, 0.28);
}

<div class="container">
    <div class="filler"></div>
    <div class="test">
        <div class="intermediate">
    	       <div class="child"></div>
    	       <div class="child"></div>
    	       <div class="child"></div>
        </div>
    </div>
</div>

Ответ 4

Как добавить 100% в контейнер:

.column-parent {
  flex: 1 0 100%;
}

И flex-grow до 1 в содержащемся элементе без корректировки основы flex:

.column-child {
  flex: 1 0 0;
}

Вот как это выглядело бы: http://plnkr.co/edit/H25NQxLtbi65oaltNVax?p=preview