如何让Div占据剩余空间？实现侧边栏滚动自适应

我创建了一个侧边栏，要求其高度不得超过100vh。目前侧边栏内图片后方的信息数据若过多，会导致侧边栏高度超出100vh，不符合需求。需要实现以下效果：

• 当数据过多导致侧边栏高度超过100vh时，信息数据区域启用overflow: scroll变为可滚动状态
• 当数据未溢出（如大屏设备），滚动条自动消失，overflow: scroll不生效
• 解决信息区域Div占据侧边栏剩余空间的问题

解决方案 #

核心利用Flexbox弹性布局特性，让信息区域自动填充剩余空间，结合overflow-y: auto实现按需滚动：

1. 修正容器盒模型：给.container添加box-sizing: border-box，避免padding导致容器总高度超出100vh
2. 设置信息区域弹性占比：给.info添加flex: 1，让它自动填充容器剩余空间，移除固定高度height: 500px
3. 按需滚动设置：将.info的overflow: scroll改为overflow-y: auto，仅在内容超出时显示垂直滚动条
4. 调整标题位置：把标题移入.info容器内，避免占用额外空间导致布局溢出

修改后的代码 #

CSS

body{
  padding:0;
  margin:0;
  font-family: arial;
}
img{
  width: 100px;
  height:100px;
  object-fit:cover;
  border-radius:500px
}
.container{
  display: flex;
  flex-direction: column;
  width: 200px;
  background: #e1e1e1;
  height:100vh;
  padding:20px 10px;
  box-sizing: border-box; /* 确保padding包含在高度内 */
}

.info{
  flex: 1; /* 填充容器剩余空间 */
  overflow-y: auto; /* 仅垂直方向按需滚动 */
}

HTML

<div class="container">
  <div class="some-stuff">
    <img src="https://images.pexels.com/photos/13538314/pexels-photo-13538314.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="">
    <hr>
  </div>

  <!-- info Data -->
  <div class="info">
    <h2>info Data section</h2>
    <div class="stud-dta-container">
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Email Address:</span>
        <p class="mt-1 fs-6-6 mb-2">youremail@email.com </p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">00 0000 0000 000</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>

      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
      <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
        <div class="stud-dta bd-btm-ext-grey mt-2">
        <span class="fs-7">Test::</span>
        <p class="mt-1 fs-6-6 mb-2">Test Data</p>
      </div>
    </div>
  </div>
</div>

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