如何让Flexbox容器宽度适配使用aspect-ratio的正方形子元素？

这是Flex布局中常见的循环尺寸依赖问题：

• Flex容器（.container）用width: fit-content，需要子元素的宽度来确定自身宽度
• 按钮（.button）的height: 100%依赖父容器（.button_container）的高度，而.button_container的高度又依赖.container的高度
• 浏览器为了避免无限循环，会优先用子元素的默认内容宽度计算容器尺寸，导致aspect-ratio生成的动态宽度被忽略

纯CSS解决方案 #

给.button_container显式设置height: 100%，打破尺寸依赖循环：

• 让.button_container明确继承.container的高度（因为.container是flex布局且align-items: stretch，这个高度是确定的）
• 按钮的height: 100%有了明确的参考值，aspect-ratio: 1就能正确计算出和高度相等的宽度
• .button_container的width: fit-content就能正确包裹按钮的实际宽度，最终.container也能适配完整的子元素宽度

修改后的完整代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  padding: 8px;
}
.container {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  column-gap: 16px;
  
  width: fit-content;
}
.button_container {
  display: flex;
  column-gap: 8px;
  border: 1px solid green;
  width: fit-content;
  height: 100%; /* 新增这行 */
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid black;
}
.first_case {
  height: 100%;
  width: 56px;
}
.second_case {
  height: 100%;
  aspect-ratio: 1 / 1;
}
.third_case {
  height: 100%;
}

<p>Fixed width (this is how it should look)</p>
<div class="container">
  <div>
    Text<br/>More text<br/>Lots of text
  </div>
  <div class="button_container">
    <div class="button first_case">
      A
    </div>
    <div class="button first_case">
      B
    </div>
  </div>
</div>

<br>

<p>Aspect ratio</p>
<div class="container">
  <div>
    Text<br/>More text<br/>Lots of text
  </div>
  <div class="button_container">
    <div class="button second_case">
      A
    </div>
    <div class="button second_case">
      B
    </div>
  </div>
</div>

<br/>
<p>Default</p>

<div class="container">
  <div>
    Text<br/>More text<br/>Lots of text
  </div>
  <div class="button_container">
    <div class="button third_case">
      A
    </div>
    <div class="button third_case">
      B
    </div>
  </div>
</div>

补充说明 #

如果需要更灵活的适配，也可以给.button设置min-height: 100%替代height: 100%，但显式设置.button_container的height: 100%是最直接解决循环依赖的方案，兼容性也更好。

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