弹性框填充父级，但不要在溢出时拉伸父级 [英] Flex box fill parent, but don't stretch parent on overflow

查看：46
本文介绍了弹性框填充父级，但不要在溢出时拉伸父级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这与

This is a similar question to Can you make a flexbox child expand to fit parent but not contents?, however, that solution doesn't work for me.

我的布局应使整个页面始终适合屏幕(在页眉和页脚之间)，并且如果内容太大，则其容器应滚动. (基本上是以下示例的最后一个示例: https://css-tricks. com/snippets/css/a-guide-to-flexbox/)

I have a layout such that the whole page should always fit on screen (between header and footer), and if contents is too large, then its container should scroll. (Basically the last example from: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

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

I already tried the solution from the question I linked above:

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

但是父级仍在页面之外.

But the parent is still being stretched off the page.

如果我将手动高度设置为#chat，则它可以正常工作，但是它只能正确地适合我所使用的屏幕尺寸，所以我想要一个自动高度.

If I set a manual height to #chat it works correctly, but then it only fits correctly for the screen size I made it on, so I want an automatic height.

#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;
}

<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" />

https://jsfiddle.net/dmn3gLz4/

推荐答案

要考虑的一些问题:

您写道:

我的布局应使整个页面始终适合屏幕(在页眉和页脚之间)，并且如果内容太大，则其容器应滚动.

I have a layout such that the whole page should always fit on screen (between header and footer), and if contents is too large, then its container should scroll.

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

Then you shouldn't set the height on the body element to min-height: 100vh.

使用min-height，您可以从该点开始扩展元素.使用height: 100vh.

With min-height you're allowing the element to expand from that point on. Use height: 100vh.

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

flex-flow: row wrap-reverse

如果您要构建三列布局，则不需要水平包装.

flex-flow: row wrap-reverse

If you're trying to build a three-column layout, there's no need for horizontal wrapping.

要反转列的顺序，请使用row-reverse而不是wrap-reverse.

To reverse the order of the columns, use row-reverse not 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). 更多详细信息 ...

flex-shrink: 1

Your header and footer each have height: 50px. But because they are flex items, and flex items can shrink by default (flex-shrink: 1), the header and footer are shrinking. To keep the 50px heights, disable shrink (flex-shrink: 0, or just use flex: 0 0 50px). More details...

您有一个错误的结束div.考虑删除它.

You have an errant closing div. Consider removing it.

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

修订过的小提琴 

#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;
}

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

这篇关于弹性框填充父级，但不要在溢出时拉伸父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆