.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 1 1;
padding: 28px;
width: 100%;
background-color: #eee;
}
.bar {
position: relative;
width: 5px;
background-color: blue;
}<div class="container">
<div class="bar"></div>
<div>
lskdjf
</div>
</div>请注意，蓝色条达到了容器的整个高度，减去了填充。
如果我添加height: 100%到.bar然而类，高度消失。
.bar {
position: relative;
width: 5px;
background-color: blue;
height: 100%;
}
我想实际上将高度设置为100％会使浏览器感到困惑，因为父级实际上没有设置高度，但是pre-setting-height-to-100％的哪个属性允许高度然后为100％？并且，鉴于这实际上是我的目标，仅指定100％是否为“正确”，还是有一种更好的方法来确保.bar元素达到最大高度？
这是由于对flexbox容器应用了默认拉伸对齐方式，该对齐方式使所有元素都拉伸到适合其父代高度。
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 1 1;
padding: 28px;
width: 100%;
background-color: #eee;
}
.bar {
position: relative;
width: 5px;
background-color: blue;
}<div class="container">
<div class="bar"></div>
<div>
lskdjf
</div>
</div>如果flex项目的cross size属性计算为auto，并且交叉轴边距都不是auto，则flex项目将被拉伸。它的使用值是使商品的边距框的交叉尺寸尽可能接近该行的尺寸所需的长度，同时仍要遵守min-height / min-width / max-height / max-宽度。参考
如果更改对齐方式，将不再发生
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 1 1;
padding: 28px;
width: 100%;
background-color: #eee;
align-items:flex-start;
}
.bar {
position: relative;
width: 5px;
background-color: blue;
}<div class="container">
<div class="bar"></div>
<div>
lskdjf
</div>
</div>如果你设置任何高度值，大小将不再是汽车考虑上述规范，这样的弹力将不再适用，就会陷入比例高的问题，这将使高处坠落到汽车，因为父高度没有明确设置。
指定百分比高度。相对于生成的框的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。参考
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句