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;，这将使您的文本容器扩展为它的全高。

在这个阶段，你会发现你的头像已经消失;这是因为flex需要其中的内容来确定其高度，尤其是在flex-direction: column;上设置时。以前，当它设置为flex: 1;时，它会确定两个容器的高度彼此相等，现在您已经更改了它，您需要在此设置height。这是使用<img>比使用background-image更好的原因之一。