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 - 展開容器下載以顯示溢出內容

回答

相關問題