如何讓子項的高度自動均分於父項的高度

這個問題一般出現在比較複雜的版面，例如左右兩欄，左欄是選單，右欄由多種元素組成，可能是 Banner、圖加文的文章或是多種複合元素組成，由於內容長短不一定，直接造成左右兩欄的高度無法限制在一個範圍內，但有時為了版面的整齊，我們會希望左右兩欄的底部可以對齊，這時我們該怎麼辦呢？

案例 HTML

<div class="container">
  <ul class="side_menu">
    <li class="items">menu 1</li>
    <li class="items">menu 2</li>
    <li class="items">menu 3</li>
    <li class="items">menu 4</li>
    <li class="items">menu 5</li>
  </ul>
  <main>
    高度不確定的複合元素 (如：Banner、圖加文的文章)
  </main>
</div>

案例 CSS

.container{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1em;
  width: 1200px;
}

由於右側 <main> 包覆的內容高度無法確定，以至於我們無法通過計算得到左側 .items 的高度。更甚者，連左側 .items 的數量也是動態增減。

遇到這種情況時我們只需要將父項 ul 的 display 設為 flex，flex-direction 設為 column，接著將子項 li 的高度設為 100%。這樣子不只是右側 <main> 的高度可以自由設定，<ul class="side_menu"> 會自動適配右側內容的高度並均分 <li class="items"> 的高度，連左側的 <ul class="side_menu"> 裡面的 <li> 也可以任意增減，十分有彈性，範例如下：

修改過的 CSS

ul.side_menu{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
li.items{
  height: 100%;
}