撓性柱高度：在100vh高度集裝箱內100％％

看到這個fiddle。撓性柱高度：在100vh高度集裝箱內100％％

我有一個彈性佈局，flex-direction:column與height: 100vh的容器內。我的柔性佈局容器（藍色）必須採用主容器的全高（height:100%）。

現在給出這個上下文，我想避免當視口高度太小而不能包含所有元素時，右側的flex元素溢出。

所以我希望所有的視口都是藍色的，而且藍色裏面的所有紅色元素都留在列中。

我試圖設置min-height:100vh，它適用於讓我所有的項目在列中，但笨拙的我的藍色flex佈局容器沒有loger需要完整的100％的高度。

我無法更改html結構。

來源

2015-10-15 MQ87

.search-form {...}用min-height: 100%;代替height: 100%;，使其允許增長大於100％。

Fiddle here

來源

2015-10-15 11:31:31 klaar

鑑於這種情況下，現在我想，以避免對撓性元件溢出權當視口的高度是太小，無法容納所有的元素。

所以我希望所有的視口都是藍色的，我所有的紅色元素都在之內，藍色留在列中。

在柔性容器（.flex-row）改變flex-wrap: wrap到flex-wrap: nowrap。

.flex-row { 
    width: 100%; 
    display: flex; 
    /* flex-wrap: wrap; REMOVE */ 
    flex-wrap: nowrap; /* NEW */ 
    justify-content: space-around; 
    flex-direction: column; 
    align-items: center; 
}

DEMO：http://jsfiddle.net/hxknmzfd/2/

flex-wrap

的CSS flex-wrap屬性指定柔性物品是否被強制成一行或可以纏繞在多條線。

來源

2015-10-15 13:38:39

不錯的解決方案，使用現代技術，但有一點要說的是，當父母高度縮小時，內容被推到父母的頂部和底部，而不是在底部，大多數人可能會期望。 – klaar

@klaar，是的，我注意到了。當父母（藍色）收縮得足夠小時，紅色盒子會溢出容器。這是因爲字體大小固定爲18px。所以容器可以一直收縮到0，但是紅盒子不能由於每個盒子中的18px內容。一種最小化溢出的方法是使用'vh'作爲字體大小：http://jsfiddle.net/hxknmzfd/4/ –

或者另一種方法是使用媒體查詢來將「justify-content」調整爲另一個值。 – klaar

撓性柱高度：在100vh高度集裝箱內100％％

回答

相關問題