Flex 框填充父级，但不要在溢出时拉伸父级

Question

这是一个与Can You make a flexbox child expand to fit parent but not contents类似的问题。，但是，该解决方案对我不起作用。

我有一个布局，这样整个页面应该总是适合屏幕（页眉和页脚之间），如果内容太大，那么它的容器应该滚动。（基本上最后一个例子来自：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/）

我已经尝试了我上面链接的问题的解决方案：

#chat {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}

但是父级仍然被拉出页面。

如果我为#chat它设置了手动高度，它可以正常工作，但它只适合我制作的屏幕尺寸，所以我想要一个自动高度。

#chat {
    background-color: #ceecf5;
    flex-grow: 1;
    overflow: auto;
}

#flex-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  min-width: 300px;
  flex: 1;
}
#header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
#column-flex-container {
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
}
.column {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 300px;
  overflow: auto;
  background-color: aqua;
}
#chat {
  background-color: #ceecf5;
  flex-grow: 1;
  overflow: auto;
}
#main-column {
  flex: 1 1 auto;
  background-color: azure;
}
#footer {
  height: 50px;
  background-color: red;
}
html,
body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

https://jsfiddle.net/dmn3gLz4/

Answer 1

需要考虑的几个问题：

min-height: 100vh

你写了：

我有一个布局，这样整个页面应该总是适合屏幕（页眉和页脚之间），如果内容太大，那么它的容器应该滚动。

那么你不应该将body元素的高度设置为min-height: 100vh.

随着min-height您允许元素从那时起扩展。使用height: 100vh.

html,
body {
  margin: 0;
  display: flex;
  /* min-height: 100vh; */
  flex-direction: column;
  height: 100vh; /* establish fixed height */
}

flex-flow: row wrap-reverse

如果您尝试构建三列布局，则无需水平环绕。

要反转列的顺序，请使用row-reversenot wrap-reverse。

#column-flex-container {
  display: flex;
  /* flex-flow: row wrap-reverse; */
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
  flex-flow: row-reverse nowrap; /* OR, just...
  flex-direction: row-reverse; */
}

flex-shrink: 1

您的页眉和页脚各有height: 50px. 但是因为它们是弹性项目，并且弹性项目默认可以收缩（flex-shrink: 1），所以页眉和页脚正在收缩。要保持 50px 高度，请禁用收缩（flex-shrink: 0，或仅使用flex: 0 0 50px）。更多详情...

语法错误

你有一个错误的结束 div。考虑删除它。

        <div id="main-column" class="column"></div>
        <div class="column side-column"></div>
    </div>
<!-- </div> -->  <-- STRAY CLOSING TAG
<div id="footer"></div>

修改后的小提琴

html,
body {
  margin: 0;
  display: flex;
  /* min-height: 100vh; */
  flex-direction: column;
  height: 100vh; /* establish fixed height */
}

#column-flex-container {
  display: flex;
  /* flex-flow: row wrap-reverse; */
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
  flex-flow: row-reverse nowrap; /* OR, just...
  flex-direction: row-reverse; */
}