如何防止弹性项目高度因内容而溢出

Question

我刚开始学习 flex，到目前为止给我留下了深刻的印象。但是，我遇到了包含 header/footer 和三列的整页应用程序的问题。第一列包含一个项目列表，由于我无法为其父级设置固定高度，每次列表增长时，它都会将页脚向下推。

这是布局的代码笔：http://codepen.io/anon/pen/vNVQNj Html :

<html>
<head>
  <body>
    <div class="app-wraper">
      <div class="Navbar"></div>
      <div class="main-content">
        <div class="Bidlist">
          <div class="column">
            <div class="tabcontainer">
            </div>
          <div class="content-container">
          <ul class="list-group instruments">
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            <li class="intrument"></li>
            </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </body>
</head>
</html>

CSS :

html,
body {
  background-color: #212121;
  overflow: hidden;
}
/* layout */

.app-wraper {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.Navbar {
  height: 50px;
  background-color: black;
  margin-bottom: 0px;
}

.main-content {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.Bidlist {
  min-width: 25%;
  display: flex;
  flex-direction: column;
  padding-left: 0px!important;
  padding-right: 1px!important;
  background-color: grey;
}

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: 2px solid #3D3C3D;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 2px;
}

.tabcontainer {
  color: #fff;
  display: flex;
  height: 40px;
  background-color: black;
  flex-direction: row;
  justify-content: space-around;
}

.ContentContainer {
  flex-grow: 1;
  display: flex;
}

.instruments {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.instrument {
  flex-grow: 1;
}

.footer {
  height: 25px;
  background-color: black;
}

Answer 1

考虑指定内容 height 以获得 "fix" 维度，并使用 overflow 设置元素框的溢出方式。

对于更高级的场景，您还可以考虑使用：

CSS 最小高度属性
CSS 最大高度属性

实例：https://jsfiddle.net/enz7ae5d/

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: 2px solid #3D3C3D;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 2px;
  height: 200px;
  overflow:scroll;
}

Answer 2

您需要将 min-height: 0 添加到 .main-content CSS 规则中。这可以防止该元素拉伸以包含其子元素并将页脚推离屏幕（这是您要避免的不良行为）。

发生这种情况是因为弹性项目（弹性容器的子项）根据其内容建立 default minimum main-size，并且将拒绝小于该最小值。在你的情况下（外部弹性容器是垂直方向的），“主要尺寸”是 height，并且有问题的弹性项目（.main-content）正在建立一个基于内容的 min-height.

（如果您希望列表项可滚动，那么您可能还想将 overflow-y:auto 添加到 .main-content）

如何防止弹性项目高度因内容而溢出

How to prevent a flex item height to overflow due to it's content

css

flexbox