Html flexbox flex增长和溢出

我已经创建了一个使用FlexBox的网站，它在大多数地方都能正常工作，但我遇到了一些问题

如果您查看页面，右上角的面板正在剪切文本。这是因为下面的面板设置为上面面板高度的1.5倍。 此选项适用于此页面：

但正如您所看到的，任何标题有两行文本的内容都会降低。 所以我的问题是两件事

是否有一种方法可以让我的面板增长到顶部的1.5倍高度，但允许顶部膨胀（并让孩子们收缩）

我试着这样做：

.flex-double {
    flex-grow: 1.5;
    flex-shrink: 1;
    flex-basis: 0;
}

但没有效果

是否有办法迫使顶部面板溢出，并使底部面板填充剩余高度

---

对。只需设置所需的弹性系数：

flex:1.5；

然后Flexbox模块更改了

min height

的初始值：

为提供更合理的默认最小尺寸， 本规范引入了一个新值作为初始值 中定义的和属性的值 css2.1

因此，

minheight

将计算内容大小，这正是您想要的

您可以在Firefox上看到这种行为，但Chrome尚未实现

如果希望溢出，只需取消设置

min height

并将

overflow

添加到相应的元素：

.row{
最小高度：0；
}
.面板灰色{
溢出：自动；
}

好的，我在这方面遇到了问题，所以我用CSS制作了一个代码笔，并试图自己解决这个问题。 这是代码笔：

我通过创建一个名为.flex auto的新类来解决这个问题，该类取代了.flex double。 看起来是这样的：

.flex-auto {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

---

将其应用到我想要的物品上（在本例中是顶部面板），将其设置为正确的高度，然后第二个面板将占据剩余的空间。

我觉得两者都不错，唯一的区别是灰色框的高度。似乎没有内容被切断？乒乓球的电话号码被切断了off@r3plica请您提供所有相关代码以重现问题中的问题。目前，如果链接关闭或被更改，这个问题对于遇到类似问题的其他用户将毫无用处。JS Fiddle的一个堆栈片段会非常好。：）你用的是什么浏览器？