Угловой Материал Вложенной Колонка Высота Расчет

Question

Update

Кажется, что ожидаемое поведение происходит в последней Firefox и Крае - это может быть проблема исключительно для Chrome (не может поверить, что я напечатал, что ...)

Here - код, который иллюстрирует проблему. А вот код:

HTML

<div class="thingone" layout="column" flex="100" layout-fill> 
    <div class="thingtwo" layout="column" flex="75"> 
     <div class="thingfour" layout="column" flex="25"></div> 
     <div class="thingfive" layout="column" flex="75"></div> 
    </div> 
    <div class="thingthree" layout="column" flex="25"></div> 
</div> 

CSS

.thingone { 
    background-color: red; 
} 
.thingtwo { 
    background-color: blue; 
    border: 10px solid black; 
} 
.thingthree { 
    background-color: green; 
    border: 10px solid white; 
} 
.thingfour { 
    background-color: yellow; 
} 
.thingfive { 
    background-color: orange; 
} 

Моя конечная цель, чтобы увидеть три полных бара - первые два завернутые в баре, который занимает 75% доступной площади родителя, а последняя занимает всего 25% от доступной площади родителя. Первые два бара должны занимать соответственно 25% и 75% от их родительской площади.

Как вы можете видеть из кодафа, я близок, но дочерние столбцы не уважают их 25% и 75% гибких назначений. В качестве простого примера я пытаюсь понять, почему.

В идеале я бы хотел, чтобы решение, которое не связано с строками (как настоящий UI, этот пример моделируется после столбцов), если столбцы не вложены в строки.

Возможно, что еще более важно - какой простой способ объяснить, что здесь происходит? Существует ли правило «правило» при работе с вложенными столбцами в flex (например, всегда предоставляющее явные назначения высоты родительским элементам)?

Спасибо!

Answer 1

Решение проблемы состояло в том, чтобы не использовать атрибут «layout-fill» в элементе «thingtwo» при попытке элемента заполнить доступное вертикальное пространство. «layout-fill» указывает атрибут min-height CSS в дополнение к атрибуту height, который, как представляется, вызывает проблему макета.

Вот решение для тех, кто наткнуться на аналогичный вопрос:

HTML

<div class="thingone" layout="column" flex="100"> 
    <div class="thingtwo" layout="column" flex="75"> 
     <div class="thingfour" layout="column" flex="25"></div> 
     <div class="thingfive" layout="column" flex="75"></div> 
    </div> 
    <div class="thingthree" layout="column" flex="25"></div> 
</div> 

CSS

.thingone { 
    background-color: red; 
    height: 100%; 
} 
.thingtwo { 
    background-color: blue; 
    border: 10px solid black; 
    height: 100%; 
} 
.thingthree { 
    background-color: green; 
    border: 10px solid white; 
} 
.thingfour { 
    background-color: yellow; 
} 
.thingfive { 
    background-color: orange; 
}