滚动条更改两列html布局中第二列的大小

<div class="container">
  <div class="column1">第一列内容</div>
  <div class="column2">第二列内容</div>
</div>

.container {
  display: flex;
  height: 100vh; /* 设置容器高度为视口高度，确保滚动条出现 */
}

.column1 {
  flex: 0 0 200px; /* 设置第一列的固定宽度 */
  background-color: #ccc;
}

.column2 {
  flex: 1; /* 设置第二列的自动增长，占满剩余空间 */
  overflow-y: auto; /* 设置垂直滚动条出现 */
  background-color: #eee;
}

<div class="container">
  <div class="column1">第一列内容</div>
  <div class="column2">第二列内容</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 设置两列的宽度比例 */
  height: 100vh; /* 设置容器高度为视口高度，确保滚动条出现 */
}

.column1 {
  background-color: #ccc;
}

.column2 {
  overflow-y: auto; /* 设置垂直滚动条出现 */
  background-color: #eee;
}