CSS布局求助：如何让左侧滚动div不超出窗口高度？

现有如下布局代码，希望左侧的#item-selector容器不超出窗口高度，自动填充页面剩余空间，当内容超出自身高度时可滚动。尝试过设置html/body高度为100vh、添加overflow属性均无效，固定高度虽能解决问题但不符合自适应需求。

原始代码 #

CSS #

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
}

main h2 {
  padding: 20px 20px 10px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}

HTML #

<nav>
  <h1>Header</h1>
</nav>
<main>
  <h2>Your items:</h2>
  <div id="item-wrapper">
    <div id="item-selector">
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
      <div class="item">
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>

解决方案 #

通过嵌套Flex布局给容器添加明确的高度约束，实现自适应剩余空间：

修改后的CSS #

* {
  margin: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /* 将body设为垂直Flex容器，子元素自动分配垂直空间 */
  display: flex;
  flex-direction: column;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
}

main {
  /* 让main占据body的剩余垂直高度 */
  flex: 1;
  /* main内部也用垂直Flex布局，分配h2和item-wrapper的空间 */
  display: flex;
  flex-direction: column;
  /* 隐藏main内部溢出，避免触发页面全局滚动 */
  overflow: hidden;
}

main h2 {
  padding: 20px 20px 10px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
  /* 让item-wrapper占据main的剩余垂直高度 */
  flex: 1;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  /* 内容超出时垂直滚动 */
  overflow-y: auto;
  /* 填满父容器的高度 */
  height: 100%;
}

#item-viewer {
  flex: 1;
  border: 3px solid darkslateblue;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

原理说明 #

1. 给html和body设置100%高度，确保根容器铺满窗口
2. body设为垂直Flex容器，nav保持自身高度，main自动占据剩余窗口高度
3. main内部也设为垂直Flex容器，h2保持自身高度，#item-wrapper占据main的剩余高度
4. #item-selector继承#item-wrapper的高度，设置overflow-y: auto，当内容超出容器高度时自动显示滚动条，且不会超出窗口范围

内容的提问来源于stack exchange，提问作者Henry