CSS Flexbox：如何让交叉轴方向的项目收缩至内容尺寸以下？

你的核心问题是Flex容器默认会被最高的子元素撑开高度，导致控制高度的object1无法约束另一个元素的高度。要实现object1高度变化时，object2同步收缩并在内容超出时显示滚动条，需要调整容器和元素的高度约束：

修改后的代码 #

CSS

.parent {
  background: #f00;
  padding: 10px;
}

.container {
  background: #0f0;
  width: 25vw;
  display: flex;
  /* 关键：让容器高度由设置了固定高度的子元素（object1）决定，而非被内容撑开 */
  height: 0;
  min-height: min-content;
}

.object {
  background: #00f;
  margin: 10px;
  width: 100px;
  flex-shrink: 0;
}

.object.flexes-main-axis {
  flex-grow: 1;
  flex-shrink: 1;
  /* 这个高度直接决定容器和object2的高度 */
  height: 75px;
}

.object.shrinks-cross-axis-below-content {
  /* 让元素高度完全继承容器高度 */
  height: 100%;
  /* 内容超出时显示垂直滚动条 */
  overflow-y: auto;
}

.child {
  background: #f0f;
  height: 100px;
  width: 100px;
}

HTML

<div class='parent'>
  <div class='container'>
    <div id="object1" class='object flexes-main-axis sets-cross-axis-size'></div>
    <div id="object2" class='object shrinks-cross-axis-below-content'>
      <div class="child"></div>
    </div>
  </div>
</div>

关键调整说明 #

1. 容器高度约束：给.container设置height: 0; min-height: min-content;，强制容器高度由子元素中明确设置了高度的object1决定，不再被object2的内容撑开。
2. 同步元素高度：给.shrinks-cross-axis-below-content设置height: 100%，让它的高度完全跟随容器（也就是跟随object1的高度）。
3. 移除无效属性：删掉.parent的display: contents，该属性会让父元素不生成布局盒子，导致背景和约束失效，这里不需要使用。

现在你调整object1的height值，比如改成80px，object2会同步收缩到80px，内部100px的洋红色子元素会触发垂直滚动条；如果把object1的高度改成120px，object2高度也会变成120px，子元素完全显示，不会出现滚动条。

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