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

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

我刚开始学习 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;
}

考虑指定内容 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;
}

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

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

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