Flex列换行和Flex Basis 100%额外空间

Question

在下面的示例中，在桌面视图中，.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-content中。

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)。

此外，现在的一些浏览器接受父母的伸缩长度作为具有百分比身高的孩子的足够参考。然而，它是不一致和不可靠的。

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

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