如何防止彈性物品高度因內容而溢出

我剛開始學習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;'解決了問題。 –

如何防止彈性物品高度因內容而溢出

回答

相關問題