html - flex 方向等高行 : column

Question

我有一个包含两个 flex 元素的 flex 布局，显示为行(flex-direction: column)。这些元素应该有一个最小高度，但它们应该保持与其中一个元素增长所需的高度相同。参见 this JSFiddle并减小结果 Pane 的宽度；这会强制第二个 .component 元素增加其高度，但第一个 .component 元素的高度保持不变。

是否可以强制 flex 元素保持相同的高度？请注意，这里的主要内容是两个 .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>

Answer 1

flex 等高列特性——这是 align-items: stretch 的结果， flex 容器的默认设置——只适用于同一行的 flex 元素。

它不适用于多行 flex 容器中的元素。此行为在规范中定义:

6. Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.

换句话说，当基于行的 flex 容器中有多行时，每行的高度(“交叉尺寸”)是“包含所需的最小尺寸”行上的 flex 元素”。

另外，因为 align-items: stretch 沿交叉轴工作，等高列特性在 flex-direction: column 中是无用的，其中交叉-轴是水平的。

要在多行中实现等高的列/行，请考虑使用 Javascript 解决方案。

---

但是，在不太了解您的总体目标的情况下，这里有一种在当前布局中实现等高行的简单方法:

Add duplicate content in both divs. In the .component.left div, use visibility: hidden.

Revised Fiddle