Question

我主要使用flexbox，但我似乎错过了一个概念。我想要的是这样的东西

Blocks stacking out sideways

基本上我不希望页面垂直溢出，所有那些红色块垂直堆叠并水平包裹 - 如果需要但是从不垂直水平溢出和滚动屏幕。

问题在于我不知道如何将红色部分容器的高度设置为＆＃34;屏幕上可用的其余高度＆＃34;。 height: 100%不起作用，即使使用flexbox，它似乎与屏幕宽度相关联。我当然可以将其硬设置为像素数，但这是错误的，因为不同的屏幕可能有不同的尺寸。

This is the jsbin template for what I'm doing。我可以设置body: 100vh，但身体的内容向下延伸，我不知道如何设置主要高度，如上所述。

Answer 1

默认情况下，<body>和<html>标记只与其内容一样高。因此，要从视口顶部垂直弯曲到底部，您需要将它们设置为height: 100%。

~~除此之外，您已经发现了flexbox的实现错误。下面的代码在Safari中按预期工作，但在Chrome和Firefox中已经破解。~~

更新：正如Daniel Holbert在此所述：https://bugzilla.mozilla.org/show_bug.cgi?id=1212058此行为实际上是由于新实现的min-height: auto行为。以下代码已更新，可在支持现代Flexbox的所有浏览器中正常运行。

＆＃13;

* { 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;
}

＆＃13;

<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>	
          <aside>
              <button>Cancel</button>
              <button>Save</button>
          </aside>
      </main>
  </div>
</body>

＆＃13;

注意：要查看列包装，您需要点击代码段中的“整页”

Flexbox - 不要垂直溢出容器

1 个答案: