如何防止弹性物品高度因内容而溢出

我刚开始学习flex，至今我印象深刻。但是，我有一个包含页眉/页脚和三列的整页应用程序的问题。第一列包含项目列表，并且由于我无法将其固定高度添加到其父项，所以每次列表增长时，都会将页脚向下推。 http://codepen.io/anon/pen/vNVQNj HTML：：如何防止弹性物品高度因内容而溢出

这里有一个与布局codepen

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

来源

2015-11-09 Jonas Barenfeld

如果不加的高度，如何将浏览器知道什么时候来包装或溢出？目前还不清楚是什么问题， –

考虑为了有一个 “修复” 的尺寸，并使用overflow设置指定您的内容height你想如何溢出元素的框。

对于更高级的场景中，你也可以考虑使用：

CSS分钟-height属性
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; 
}

来源

2015-11-09 15:14:50 GibboK

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

发生这种情况的原因是，Flex项目（柔性容器的子项）根据其内容建立default minimum main-size，并拒绝小于该最小值。在你的情况下（外部柔性容器是垂直定向的），“主要尺寸”是height，并且所讨论的柔性项目（.main-content）正在建立基于内容的min-height。

（如果你想在列表中的项目是滚动的，那么你可能也想加入到overflow-y:auto.main-content）

来源

2015-11-09 15:34:34 dholbert

我有一个与OP类似的问题 - 我们有一个带有可在其中添加行的表格的flex容器。即使在容器上设置了“max-height”和“overflow-y：auto”，但容器的高度会增加以适合所有行，但向容器中添加了“min-height：0px;'解决了问题。 –

如何防止弹性物品高度因内容而溢出

回答

相关问题