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

时间：2017-01-29 15:58:37

标签： html css css3 flexbox

这是与 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它可以正常工作，但是它只适合我开启的屏幕尺寸，所以我想要一个自动高度。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<div id="flex-container">
  <div id="header"></div>
  <div id="column-flex-container">
    <div class="column side-column">
      <div id="chat">
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
      </div>
    </div>
    <div id="main-column" class="column"></div>
    <div class="column side-column"></div>
  </div>
</div>
<div id="footer" />
＆＃13;
＆＃13;
＆＃13;

https://jsfiddle.net/dmn3gLz4/

1 个答案:

答案 0 :(得分：4)

需要考虑的一些问题：

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-reverse而不是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）。 More details ...

语法错误

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

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

revised fiddle

＆＃13;
＆＃13; 
#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;
  flex: 0 0 50px; /* new */
}
#column-flex-container {
  display: flex;
  /* flex-flow: row wrap-reverse; */
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
  flex-direction: row-reverse;
}
.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;
  flex-shrink: 0; /* new */
}
html,
body {
  margin: 0;
  display: flex;
  height: 100vh; /* adjusted */
  flex-direction: column;
}
＆＃13; 
<div id="flex-container">
  <div id="header"></div>
  <div id="column-flex-container">
    <div class="column side-column">
      <div id="chat">
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
        <div class="message">Sender: Message</div>
      </div>
    </div>
    <div id="main-column" class="column"></div>
    <div class="column side-column"></div>
  </div>
  <!-- </div> -->
  <div id="footer"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题