flex-direction: column中的等高行

Question

我有一个flex布局，其中包含两个flex项目，按行显示（flex-direction: column）。这些项目应该具有最小高度，但如果其中一个需要增长，则它们的高度应该保持相同。请参见此JSFiddle示例，缩小结果面板的宽度; 这将强制第二个.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>

- Andrei V

---

我不确定您想要实现什么布局。您是希望这两个组件并排放置且高度相等，还是堆叠在一起且高度相等？对于我来说，这个示例中这两个组件是重叠的。...所以您是指希望它们堆叠在一起而不是并排放置吗？ - elfwyn

@elfwyn，重叠是布局中最重要的部分，这是有意为之的。这就是为什么我设置了所有的边距。它们都有一个最小高度为300px。.right组件的高度将根据其内容而改变。当发生这种情况时，.left组件也应该改变其大小。 - Andrei V

Answer 1

弹性等高列是指在弹性容器中，当使用align-items: stretch时，同一行的弹性项具有相等的高度。

然而，在多行弹性容器中，该功能不适用。这种行为在规范中有定义：

6. 弹性行

在多行弹性容器（即使只有一行），每行的交叉轴尺寸都是包含该行上的弹性项所需的最小尺寸（经过align-self对齐后），并且使用align-content属性在弹性容器内对齐行。

换句话说，当在基于行的弹性容器中存在多行时，每行的高度（即"交叉轴尺寸"）是"包含该行上的弹性项所需的最小尺寸"。

此外，由于align-items: stretch沿交叉轴起作用，因此该等高列功能在flex-direction: column中无用，因为交叉轴是水平的。

为了实现多行中跨列/行的等高列，请考虑使用Javascript方案。

---

然而，如果不了解您的整体目标，这里有一种简单的方法可以实现当前布局中的等高行：在两个div中添加重复内容。在.component.left div中使用visibility: hidden。修订版Fiddle

- Michael Benjamin

---

谢谢您的回答。在尝试重叠列后，我忘记了删除“align-items”规则。这可能是一个_XY问题_。我应该表明所需的输出（重叠的子元素和内容感知容器），而不是询问如何解决flexbox问题。尽管如此，您的答案提供了我的问题的解决方案。经过一些考虑，我放弃了flexbox，并找到了使用伪元素的解决方案。需要提出正确的问题... - Andrei V

Answer 2

您可以将那些flexbox列包装在另一个flexbox中，使其成为一行。这样做并不会有任何问题，因为项目可以同时是flexboxes和flex items。

#container {
  display: flex;
}

#container .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: grey;
}

<div id="container">
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
</div>

https://jsfiddle.net/1dp87bm2/1/

- JackHasaKeyboard