行为与身高/分钟身高和显示:弯曲 [英] Behavior with height/minHeight and display:flex
问题描述
我正在观察以下行为.
此代码:
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<div container style={{ flex: 1, border: "2px solid green" }} />
<div style={{ minHeight: 300, border: "1px solid blue" }}>
<div id="map" style={{ border: "3px solid red", height: "100%" }} />
</div>
</div>
结果:
请参见红色边框，似乎带有id贴图的div占据了一定高度.
现在，如果我将单更改为上述代码，并将
<div
style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}
>
<div container style={{ flex: 1, border: "2px solid green" }} />
<div style={{ minHeight: 300, border: "1px solid blue" }}>
<div id="map" style={{ border: "3px solid red", height: "100%" }} />
</div>
</div>
您可以看到下面的屏幕截图，红色边框，地图不再具有高度.
似乎很奇怪，为什么与顶级div一起玩会以这种方式影响具有id映射的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="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>
您可以看到，在所有定义了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="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项的高度为父级高度的
TL; DR
flex项(当flex方向为column且flex容器具有明确的高度时)将具有由flex属性定义的高度，并考虑其内部的内容(基本上该内容仅设置min-height约束)，然后计算该高度后，浏览器可以解析其中项目的高度的任何百分比值.
这是一个相关的问题，在这里我们有一个类似的问题，并且在这里我们可以解决百分比值:为什么我的Grid元素的高度计算不正确?
I am observing following behavior.
This code:
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<div container style={{ flex: 1, border: "2px solid green" }} />
<div style={{ minHeight: 300, border: "1px solid blue" }}>
<div id="map" style={{ border: "3px solid red", height: "100%" }} />
</div>
</div>
results in this:
See red border, it seems div with id map took some height.
Now if I make single change to above code, and change height of top div to minHeight:
<div
style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}
>
<div container style={{ flex: 1, border: "2px solid green" }} />
<div style={{ minHeight: 300, border: "1px solid blue" }}>
<div id="map" style={{ border: "3px solid red", height: "100%" }} />
</div>
</div>
You can see the screen shot below, red border, the map has no height anymore.
Seems strange why playing with the top div affects the div with id map in such way... isn't it?
From the specification
Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a cyclic percentage ...
Then a whole set of complex rules and:
Then, unless otherwise specified, when calculating the used sizes and positions of the containing block’s contents:
If the cyclic dependency was introduced due to a block-size or max-block-size on the containing block that causes it to depend on the size of its contents, the box’s percentage is not resolved and instead behaves as auto.
Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block).
Basically we need to see if the percentage can be resolved without any cyclic denpendeny or not.
In the second case, you defined the container to have a min-height which means that its height will be defined by its content so we need to first know the content height to find the height of the container and this will make the percetange height fail to auto because we cannot resolve it since we only have min-height:300px and we need to also find the height based on the content.
In the first case, you defined the container to have height:100% so the height is defined but we still have only min-height in the child element. Here it's a bit complex because the height of that element can be found using the flex properties. Basically the browser can resolve the height of that element without knowing its content then use the calculated height to resolve the percentage value.
Here is a basic example to better illustrate:
.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>
You can see that in all the cases where the height of the flex container is defined we are able to resolve the percentage height of the nested element because the browser is able to calculate the height without the need of the content.
In reality, the content is also used to define the height which add more complexity. Let's consider the below example:
.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>
You can see that the text is overflowing the red div (its container) and the height of the flex item is matching the height of the text. In this case, the browser is still able to identify the height of the flex item based on the flex properties and those properties also consider the content!
A flex item cannot shrink past its content size that's why flex-basis:50% is not giving 50% of the parent height but the min value between 50% and the content height.
If you add min-height:0 you will have a different behavior:
.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>
Now the flex item is taking 50%of the parent height (ignoring its content) then its child element is taking 80% of that height and the content is logically overflowing.
TL;DR
A flex item (when the flex direction is column and the flex container have an explicit height) will have its height defined by the flex properties and considering the content inside (basically the content will only set the min-height constraint) then after calculating that height the browser can resolve any percentage value of height for the items inside.
Here is a related question where we have a similar issue and where we are able to resolve the percentage value: Why is my Grid element's height not being calculated correctly?
这篇关于行为与身高/分钟身高和显示:弯曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
