我有一个带有两个弹性项目的弹性布局，显示为行（flex-direction: column）。这些物品应该有一个最小高度，但它们应该保持其中一个物品生长所需的相同高度。看这个 JSFiddle https://jsfiddle.net/958vxhox/并减小结果窗格的宽度；这迫使第二个.component元素增加其高度，但第一个元素的高度.component元素保持不变。
是否可以强制弹性项目保持相同的高度？请注意，这里的主要内容是两者的堆叠.component没有这些元素我就无法实现flex-direction: column; flex-direction: row本来可以达到相同的高度，但堆叠不起作用。
这是我到目前为止所得到的结果：
div {
border: 1px solid black;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-content: stretch;
}
.component {
min-height: 300px;
}
.left {
margin-left: 50px;
margin-top: 50px;
margin-right: 100px;
background-color: lightyellow;
}
.right {
margin-left: 100px;
margin-top: -250px;
margin-right: 50px;
background-color: lightgreen;
}
<div class="container">
<div class="component left">
</div>
<div class="component right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed orci scelerisque, scelerisque enim at, ullamcorper ipsum. Cras eget sapien mi. Aliquam ultrices, ligula ut mollis maximus, ligula massa imperdiet libero, at faucibus mauris ante non
magna. Sed ex lacus, efficitur sit amet neque ut, venenatis hendrerit libero. Suspendisse ornare orci mi. Nulla iaculis egestas libero, eu tincidunt urna tristique et. Quisque nec odio non elit molestie facilisis.
</p>
<p>
Vestibulum scelerisque justo urna, a semper nisi sollicitudin in. Cras congue enim eu euismod semper. Proin consequat gravida felis, quis tincidunt massa pulvinar quis. Morbi nec diam eget orci vestibulum malesuada. Sed volutpat metus eget mattis commodo.
Nulla facilisi. Praesent lectus mauris, consequat eu varius vitae, cursus vitae leo. Vivamus sagittis lacinia tortor eu ullamcorper. Integer eget velit magna. Duis vestibulum molestie posuere.
</p>
</div>
</div>
弹性等高列功能 – 这是以下结果align-items: stretch，Flex 容器的默认设置 – 仅适用于同一行上的 Flex 项目。
它不适用于多行弹性容器中的项目。此行为在规范中定义：
6. 柔性线 https://www.w3.org/TR/css3-flexbox/#flex-lines
在多行柔性容器中（即使只有一行），
每条线的交叉尺寸是包含该线所需的最小尺寸
线上的弹性项目（由于对齐后align-self），以及
线条在 Flex 容器内与align-content财产。
换句话说，当基于行的弹性容器中有多行时，每行的高度（「十字尺寸」） 是个“包含线路上的弹性项目所需的最小尺寸”.
另外，因为align-items: stretch沿横轴工作，等高列功能在以下情况下无用：flex-direction: column，其中横轴是水平的。
要在多行中实现相同高度的列/行，请考虑使用 Javascript 解决方案。
但是，在不太了解您的总体目标的情况下，这里有一个在当前布局中实现等高行的简单方法：
在两个 div 中添加重复的内容。在里面.component.leftdiv，使用visibility: hidden.
修订版小提琴 https://jsfiddle.net/958vxhox/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
