Question

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

这是一个包含布局的codepen：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

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

这是因为flex项目（flex容器的子项）根据其内容建立default minimum main-size，并且拒绝小于该最小值。在您的情况下（外部Flex容器垂直方向），“main-size”为height，并且有问题的flex项（.main-content）正在建立基于内容的{{1} }。

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

Answer 2

考虑指定您的内容height，以便进行＆＃34;修复＆＃34;维度并使用overflow来设置元素框溢出的方式。

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

CSS min-height属性
CSS max-height属性

实例：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;
}

如何防止Flex项目高度因其内容而溢出

2 个答案: