От спецификация
Иногда размер блока, содержащего блок в процентах, зависит от вклада внутреннего размера самого блока, создавая циклическую зависимость.При вычислении вклада внутреннего размера такого блока (включая любые вычисления для автоматического минимального размера на основе содержимого), циклический процент ...
Затем весь набор complex правила и:
Тогда, если не указано иное, при расчете используемых размеров и позиций содержимого содержащего блока:
Если введена циклическая зависимостьиз-за размера блока или максимального размера блока в содержащем блоке, который заставляет его зависеть от размера его содержимого, процентное соотношение блока не разрешается и вместо этого ведет себя как auto.
В противном случае процентное соотношение разрешается относительно размера содержащего блока.(Размер содержащего блока не разрешается повторно в зависимости от полученного размера блока; содержимое может, таким образом, переполниться или переполнить содержащийся блок).
В основном нам нужнопосмотрите, можно ли разрешить процент без какой-либо циклической зависимости или нет.
Во втором случае вы определили, что контейнер имеет min-height, что означает, что его высота будет определяться его содержимым , поэтому нам нужно сначала узнать высоту содержимого, чтобы найти высоту контейнера, и это приведет к тому, что высота percetange не будет выполнена автоматически, поскольку мы не можем ее разрешить, поскольку у нас есть только min-height:300px, и нам также нужно найти высоту на основеthe content.
В первом случае вы определили, что контейнер имеет height:100%, поэтому высота определена, но у нас все еще есть только min-height в дочернем элементе.Здесь это немного сложно, потому что высоту этого элемента можно найти с помощью свойств flex.По сути, браузер может разрешить высоту этого элемента, не зная его содержимого, а затем использовать вычисленную высоту для определения процентного значения.
Вот базовый пример для лучшей иллюстрации:
.box {
display: flex;
flex-direction: column;
border:1px solid red;
margin:10px;
}
.box>div {
border: 1px solid;
}
.height {
height: 80%;
background: red;
}
<div class="box" style="min-height:200px;">
<div style="min-height:100px;">
<div class="height">content here</div>
</div>
</div>
<div class="box" style="height:200px;">
<div style="min-height:100px;">
<div class="height"> content here</div>
</div>
</div>
<div class="box" style="height:200px;">
<div style="flex-basis:50%;">
<div class="height"> content here</div>
</div>
</div>
<div class="box" style="height:200px;">
<div style="flex-grow:1;">
<div class="height"> content here</div>
</div>
</div>
Вы можете видеть, что во всех случаях, когда определяется высота гибкого контейнера, мы можем определить процентную высоту вложенного элемента, поскольку браузерможет рассчитать высоту без необходимости содержания.
В действительности, контент также используется для определения высоты, которая добавляет сложности.Давайте рассмотрим приведенный ниже пример:
.box {
display: flex;
flex-direction: column;
border: 1px solid red;
margin: 10px;
}
.box>div {
border: 1px solid;
}
.height {
height: 80%;
background: red;
}
<div class="box" style="height:200px;">
<div style="flex-basis:50%;">
<div class="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div>
</div>
</div>
Вы можете видеть, что текст переполняет красный div (его контейнер), а высота гибкого элемента совпадает с высотой текста.В этом случае браузер все еще может определить высоту элемента flex на основе свойств flex, и эти свойства также учитывают содержимое!
Элемент flex не может сжиматься после его содержимого размера, поэтому flex-basis:50% не дает 50% родительской высоты, а минимальное значение между 50% и высотой содержимого.
Если вы добавите min-height:0, у вас будет другое поведение:
.box {
display: flex;
flex-direction: column;
border: 1px solid red;
margin: 10px;
}
.box>div {
border: 1px solid;
}
.height {
height: 80%;
background: red;
}
<div class="box" style="height:200px;">
<div style="flex-basis:50%;min-height:0">
<div class="height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nunc sit amet justo congue, et convallis diam porttitor. Curabitur semper tellus eget semper vehicula. In auctor ut nunc vitae faucibus. Integer molestie aliquam lacinia.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.
Vestibulum blandit sem vitae tortor fermentum auctor. Morbi pharetra ante laoreet vestibulum laoreet. Nam id tempor eros, non ultrices leo. Quisque tincidunt hendrerit tortor ut malesuada.</div>
</div>
</div>
Теперь элемент flex принимает 50% родительской высоты (игнорируя его содержимое), а его дочерний элемент принимает 80% этой высоты исодержимое логически переполнено.
TL; DR
A flЭлемент ex (когда направление flex равно столбцу, а контейнер flex имеет явную высоту) будет иметь высоту, определяемую свойствами flex и учитывающую содержимое внутри (в основном содержимое будет устанавливать только ограничение min-height), а затем после вычисления этой высотыбраузер может разрешить любое процентное значение высоты для элементов внутри.
Вот связанный вопрос, где у нас есть аналогичная проблема и где мы можем решить процентное значение: Почемувысота моего элемента сетки не рассчитывается правильно?