html - CSS Flexbox - 扩展容器下载以显示溢出内容

Question

我正在尝试弄清楚如何“向下扩展” flex 容器以显示当前隐藏的内容。

我有一个小演示显示这里的问题:

https://jsfiddle.net/darrengates/d4eqfppw/

.row {
  display: flex;
  flex-direction: column;
  flex: 1;
}

我尝试了“flex-shrink”和“flex-grow”的各种组合，但都没有效果。

我的想法是，我想将顶部单元格保持为当前大小，并且仅“向下扩展”底部部分以显示当前隐藏的文本。

Answer 1

通过 Chrome 检查器查看，这里的问题是属性 flex: 1;导致您左列中的容器高度相等。 (在本例中为顶部图像和文本)。

您需要做的是删除 flex: 1;这些子元素的属性并将它们恢复到初始状态 flex: 0 auto;或 flex: initial; ，这将使您的文本容器扩展到其全高。

在这个阶段，你会发现你的top image没有了；这是因为 flex需要里面的东西来确定它的高度，尤其是当它设置在 flex-direction: column; 上时.以前当它设置为 flex: 1; 时, 它将确定两个容器的高度彼此相等，既然您已经更改了它，您将需要设置一个 height对此。这是使用 <img> 的原因之一。比使用 background-image 更好.