flexbox flex增長和溢出

我已經創建了一個使用flexboxes的網站，它在大多數地方工作，但我遇到了一些問題。flexbox flex增長和溢出

如果你看一下頁面，右上角面板切斷文本。這是因爲下面的面板被設置爲1.5倍以上的高度。這此頁正常工作：

但你可以看到，任何具有2行文字爲標題的帶來的含量下降。所以我的問題是2件事。

我試着這樣做：

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

，但它沒有任何效果。

2015-06-22 r3plica

兩者對我來說都很好，唯一的區別就是灰色盒子的高度。沒有內容似乎被切斷？ – Aaron

乒乓球一號有切斷的電話號碼 – r3plica

不在我的屏幕上 – Aaron

是的。只需設置所需的彈性係數：

flex: 1.5;

然後是Flexbox的模塊改變的min-height初始值：

4.5 Implied Minimum Size of Flex Items

要爲flex items提供更合理的默認最小大小這規範引入了一個新的auto值作爲min-width和min-height中定義的屬性的初始值 CSS 2.1。

因此，min-height將計算爲內容大小，這正是你想要的。

您可以在Firefox上看到此行爲，但Chrome尚未實施。

如果你希望它溢出，正好被清除的min-height並添加overflow到相應的元素：

.row { 
    min-height: 0; 
} 
.panel-gray { 
    overflow: auto; 
}

2015-06-22 15:44:12 Oriol

好了，所以我是有這個問題，所以我做了我的CSS一codepen並試圖自己解決問題。這裏是codepen：

我設法創建一個名爲.flex-汽車它取代新類來解決這個問題。flex-double。它看起來像這樣：

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

將此應用於我想只是足夠的高度（在這種情況下，頂部面板）項目，將其設置爲正確的高度，然後第二面板會佔用休息的空間。

2015-06-22 16:02:53 r3plica

回答