为何100vh无法匹配兄弟元素高度？动态高度适配咨询

为什么height:100vh达不到需求？ #

• 100vh是视口高度，也就是浏览器当前可见窗口的高度，和preview的动态高度完全无关。如果preview的实际高度超过了视口高度，sidebar只会停留在视口高度，自然看起来比preview短；如果preview比视口矮，sidebar又会比preview高，根本做不到“跟随preview高度”。
• 你的容器是flex布局，默认align-items: stretch——这个属性本来会让子元素自动拉伸到和容器内最高元素（也就是preview）一样高，但你给sidebar硬设了height:100vh，直接覆盖了flex的拉伸规则，导致sidebar不再跟随preview的高度。

正确的实现方式 #

只需要修改两个地方：

1. 删掉sidebar的height:100vh，让flex的默认拉伸规则生效
2. 把sidebar的overflow-x: scroll改成overflow-y: auto（因为你的sidebar是垂直排列的item，需要的是垂直滚动，不是水平）

修改后的CSS代码：

.container {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 100px;
  border: 1px solid;
  overflow-y: auto; /* 改成垂直滚动 */
  /* 移除height:100vh */
}

.sidebar-item {
  margin: 10px;
  border: 1px solid;
  height: 80px;
  margin-bottom: 10px;
}

.preview {
  border: 1px solid;
  height: 600px; /* 换成动态高度也能正常适配 */
}

这样不管preview的高度是多少，sidebar都会自动和它保持一致高度，当sidebar内的item数量过多时，会自动出现垂直滚动条，完美满足需求。

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