Flexbox - 不要垂直溢出容器

我大部分都使用flexbox，但我似乎錯過了一個概念。我想是這樣的Flexbox - 不要垂直溢出容器

Blocks stacking out sideways

基本上我不想讓頁面垂直溢出，並且所有這些紅色塊垂直堆疊和包裝水平 - 如果需要，溢出和滾動屏幕水平但從來沒有垂直。

問題是我不知道如何將紅色部分容器的高度設置爲「屏幕上可用高度的其餘部分」。 height: 100%不起作用，即使使用flexbox，它似乎也與屏幕寬度有關。我當然可以將它設置爲像素數，但這是錯誤的，因爲不同的屏幕可能有不同的大小。

This is the jsbin template for what I'm doing。我可以設置body: 100vh，但隨後身體的內容會向下伸展，我不知道如何設置主體高度，如上所述。

來源

2015-10-06 George Mauer

嘗試刪除'彎曲方向：列;''從div.container' – Stickers

@Pangloss將強制水平堆疊並垂直纏繞。我特別想要相反。如果我這樣做了，不僅所有塊的順序都是錯誤的，而且如果它們溢出，屏幕會垂直推出，而不是橫向推出。 –

好的，還是完全不瞭解這個問題，但是這個怎麼樣？ http://jsfiddle.net/bez1a3L0/ – Stickers

<body>和<html>標籤默認情況下只與它們的內容一樣高。因此，要從視口頂部垂直彎曲到底部，您需要將它們都設置爲height: 100%。

~~除此之外，你已經發現了flexbox的一個實現錯誤。下面的代碼在Safari中按預期工作，但在Chrome和Firefox中被破壞。~~

UPDATE：正如丹尼爾·霍爾伯特說明如下：https://bugzilla.mozilla.org/show_bug.cgi?id=1212058這種行爲實際上是由於新實施的min-height: auto行爲。下面的代碼已更新，可在所有支持現代Flexbox的瀏覽器中正常工作。

* { margin:0; padding:0 } 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
nav { 
 
    background-color: blue; 
 
    margin: 5px 
 
} 
 

 
nav.top { 
 
    width: 100%; 
 
    height: 50px; 
 
    display: block; 
 
    flex: none; 
 
} 
 

 
div.main { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
nav.side { 
 
    width: 70px; 
 
    height: 400px; 
 
    flex: none; 
 
} 
 

 
main { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    min-height: 0; 
 
} 
 

 
div.container { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
    min-height: 0; 
 
} 
 

 
section { 
 
    width: 200px; 
 
    height: 250px; 
 
    background-color: red; 
 
    margin: 5px; 
 
} 
 

 

 

 
aside { 
 
    outline: 1px solid darkgreen; 
 
    flex: none; 
 
    height: 50px; 
 
    background: purple; 
 
}

<body> 
 
    <nav class="top"></nav> 
 
    <div class="main"> 
 
     <nav class="side"></nav> 
 
     <main> 
 
      <div class="container"> 
 
       <section></section> 
 
       <section></section> 
 
       <section></section> 
 
       <section></section> 
 
       <section></section> 
 
      </div> \t 
 
      <aside> 
 
       <button>Cancel</button> 
 
       <button>Save</button> 
 
      </aside> 
 
     </main> 
 
    </div> 
 
</body>

注：要查看包裹欄，你會想在片段點擊「全頁」

來源

2015-10-06 18:02:50 Zaqx

來修復它......在IE中工作的兒子也是值得的。這裏有什麼特別的錯誤？ –

@GeorgeMauer你不想要紅色塊來包裝？但我沒有看到他們中的任何一個包裝。 – Stickers

@Pangloss在IE或（我假設）Safari中查看它。 –

Flexbox - 不要垂直溢出容器

回答

相關問題