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 - 不要垂直溢出容器

回答

相关问题