Flexbox，Div溢出頁面

Question

我用CSS測試Flexbox。 到現在為止，我認為這很容易，但是我有一個小問題。

如您在以下示例中看到的，我構建了一個flexbox布局。 布局在頂部包含一個網站標題，在左側包含一個菜單。 內容應顯示在中間。 我希望該網站始終適合當前的瀏覽器大小。 但是，如果我的表過高（例如，進入許多條目），我的div“ tbl-content”將不再適合分頁。 如何使該容器可滾動？

 html, body { width: 100%; height: 100%; max-height: 100%; padding: 0px; margin: 0px; min-width: 300px; min-height: 200px; font-family: sego; font-size: 14px; } .wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; } #header { width: 100%; flex-shrink: 0; height: 55px; background-color: #333; display: flex; flex-direction: row; } #site { flex-grow: 1; display: flex; flex-direction: row; background-color: #eee; } #menu { width: 150px; background-color: #333; } #inhalt { flex-grow: 1; background-color: #eee; margin: 0px; } table { width: 100% } th { text-align: left; } .tbl-content tr { height: 200px; } 

 <div class="wrapper"> <div id="header">Siteheader</div> <div id="site"> <div id="menu">Menu</div> <div id="inhalt"> <div class="tbl-header"> <table cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> </table> </div> <div class="tbl-content"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 1

將此添加到您的代碼：

#inhalt {
  display: flex;
  flex-direction: column;
}

.tbl-content {
  overflow: auto;
}

 html, body { width: 100%; height: 100%; max-height: 100%; padding: 0px; margin: 0px; min-width: 300px; min-height: 200px; font-family: sego; font-size: 14px; } .wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; } #header { width: 100%; flex-shrink: 0; height: 55px; background-color: #333; display: flex; flex-direction: row; } #site { flex-grow: 1; display: flex; flex-direction: row; background-color: #eee; } #menu { width: 150px; background-color: #333; } #inhalt { flex-grow: 1; background-color: #eee; margin: 0px; display: flex; /* NEW */ flex-direction: column; /* NEW */ } .tbl-content { overflow: auto; /* NEW */ } table { width: 100% } th { text-align: left; } .tbl-content tr { height: 200px; } 

 <div class="wrapper"> <div id="header">Siteheader</div> <div id="site"> <div id="menu">Menu</div> <div id="inhalt"> <div class="tbl-header"> <table cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> </table> </div> <div class="tbl-content"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 2

如果您使用的是felx-box，則不應為此目的使用表格。 div或li簡單易讀。 它還可以重構代碼並使代碼易於理解。