css - Flex Column Wrapping 和 Flex Basis 100% 额外空间

Question

在下面的示例中，在桌面 View 中，我想删除 .main-content 元素底部的额外空间。我有一种感觉，它与 height: 100% 和 flex-basis 有关，但不确定。 flex-shrink 不起作用，即使它起作用也可能会弄乱布局。

谁能解释一下浏览器是如何解释这个布局并创建额外空间的。

html,
body {
  height: 100%;
}

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

main {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}

header,
footer,
[class^="sidebar-"],
.main-content {
  box-sizing: border-box;
  padding: 1rem;
}

header,
footer {
  background-color: lightgreen;
}

.sidebar-nav {
  background-color: lightblue;
}

.sidebar-content {
  background-color: lightyellow;
}

.sidebar-right {
  background-color: lightpink;
}

.main-content {
  background-color: lightgray;
}

@media( min-width: 48em) {
  .sidebar-nav,
  .sidebar-content {
    width: 26%;
    margin-right: 8%;
  }
  .main-content,
  .sidebar-right {
    flex-basis: 100%;
  }
  .main-content {
    width: 66%;
  }
  .sidebar-right {
    margin-left: 2rem;
    width: 20%;
  }
  .sidebar-right+.main-content {
    width: calc( 66% - ( 20% + 2rem));
  }
}


/* Ordering of Page Layout */

.sidebar-nav {
  order: 1;
}

.main-content {
  order: 2;
}

.sidebar-content {
  order: 3;
}

.sidebar-right {
  order: 4;
}

@media( min-width: 48em) {
  .sidebar-content {
    order: 2;
  }
  .main-content {
    order: 3;
  }
}

<header>
  Header
</header>

<main>
  <div class="container">

    <div class="sidebar-nav">
      Sidebar Navigation
    </div>
    <div class="sidebar-content">
      Sidebar Content
    </div>
    <div class="sidebar-right">
      Right Sidebar
    </div>
    <div class="main-content">
      Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br>      Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br>      Main Content<br> Main Content<br> Main Content
    </div>

  </div>
</main>

<footer>
  Footer
</footer>

Answer 1

解决方案

将 min-height: 0 或 overflow: auto (它们大部分相同)添加到 main 和 .main -内容。

main {
  flex-grow: 1;
  min-height: 0; /* new */
}

.main-content {
  order: 2;
  overflow: auto;  /* new */
}

已在 Chrome、Firefox 和 Edge 上测试。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

main {
  flex-grow: 1;
  min-height: 0; /* new */
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}

header,
footer,
[class^="sidebar-"],
.main-content {
  box-sizing: border-box;
  padding: 1rem;
}

header,
footer {
  background-color: lightgreen;
}

.sidebar-nav {
  background-color: lightblue;
}

.sidebar-content {
  background-color: lightyellow;
}

.sidebar-right {
  background-color: lightpink;
}

.main-content {
  background-color: lightgray;
}

@media(min-width: 48em) {
  .sidebar-nav,
  .sidebar-content {
    width: 26%;
    margin-right: 8%;
  }
  .main-content,
  .sidebar-right {
    flex-basis: 100%;
  }
  .main-content {
    width: 66%;
  }
  .sidebar-right {
    margin-left: 2rem;
    width: 20%;
  }
  .sidebar-right+.main-content {
    width: calc(66% - (20% + 2rem));
  }
}


/* Ordering of Page Layout */

.sidebar-nav {
  order: 1;
}

.main-content {
  order: 2;
  overflow: auto;   /* new */
}

.sidebar-content {
  order: 3;
}

.sidebar-right {
  order: 4;
}

@media(min-width: 48em) {
  .sidebar-content {
    order: 2;
  }
  .main-content {
    order: 3;
  }
}

<header>
  Header
</header>
<main>
  <div class="container">
    <div class="sidebar-nav">
      Sidebar Navigation
    </div>
    <div class="sidebar-content">
      Sidebar Content
    </div>
    <div class="sidebar-right">
      Right Sidebar
    </div>
    <div class="main-content">
      Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br>      Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br>      Main Content<br> Main Content<br> Main Content
    </div>
  </div>
</main>
<footer>
  Footer
</footer>

jsFiddle demo

---

问题 #1:Flex 最小尺寸算法

flex 元素不能小于其内容沿主轴的大小。 flex-direction: column 中 flex 元素的默认设置是 min-height: auto。您可以使用 min-height: 0 覆盖它，或者，如果您想要滚动条，overflow: auto。

完整解释在这里:Why don't flex items shrink past content size?

---

问题 #2:百分比高度的使用不可靠

Per the spec ，要使百分比高度按预期工作，它必须在父元素上有定义的高度。例如，您的 .container 元素具有此 CSS:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}

但是，.container 的父级 main 没有定义高度。

main {
  flex-grow: 1;
}

这会导致跨浏览器的行为不一致且不可靠。

如果父元素没有定义高度，则根据规范，浏览器应使用默认设置 height: auto 呈现元素。

然而，在现实中，不同的浏览器有不同的渲染行为。有些人坚持规范。其他人试图猜测作者的意图(这被称为 intervention )。

此外，现在一些浏览器接受 parent 的 flex 长度作为具有百分比高度的 child 的充分引用。但是，它不一致且不可靠。

处理此设置的最佳方法是确保在父项上设置高度，以便具有百分比高度的子项具有明确的引用点。还要确保使用 height 属性，因为 flex-basis 在某些浏览器/情况下并不总是可靠的。

完整解释在这里:Chrome / Safari not filling 100% height of flex parent