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

-1

我想弄清楚如何“展开”flex容器以显示当前正在隐藏的内容。CSS Flexbox - 展开容器下载以显示溢出内容

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

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

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

我试过的“弹性收缩的”和“柔性成长”，但没有效果的各种组合。

这个想法是，我想保持顶部单元格作为当前的大小，只有“展开”底部显示当前隐藏的文本。

来源

2017-06-01 Darren Gates

嗨达伦，你需要在这里包括堆栈溢出代码，而不只是一个链接到您的网站。我们不应该深入研究你的代码，你的网站会随着时间而改变，这个问题对于将来有类似问题的人来说是没用的，因为他们不能引用原始代码。看看如何创建一个[mcve] –

我会尽力做到这一点，谢谢 –

透过Chrome检查器，这里的问题是，属性flex: 1;导致您的左列中的容器高度相等。（在这种情况下，顶部的图像和文字）。

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

在这个阶段，你会发现你的顶级图像已经消失;这是因为flex需要里面的东西来确定它的高度，特别是当它设置在flex-direction: column;。以前，当它设置为flex: 1;时，它将确定两个容器的高度彼此相等，现在您已更改此设置，您需要在此设置一个height。这是使用<img>比使用background-image更好的原因之一。

来源

2017-06-02 00:31:25

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

回答

相关问题