网页computerSection区块图片不收缩问题求助（同Flexbox配置）

左侧userSection内的headerSubDiv是水平flex容器headerDiv的子元素，当容器宽度不足时，flex子元素默认会触发flex-shrink:1进行收缩（同时受max-width:100px限制），因此图片能跟着容器缩小。

而右侧computerSection是垂直方向的flex容器（flex-direction:column），flex的收缩行为仅作用于主轴（垂直方向）。headerSubDiv作为它的子元素，水平方向宽度由默认的align-items:stretch控制，再加上max-width:100px，导致它的宽度固定为100px，不会随容器水平宽度收缩，因此图片也不会缩小。

有两种简单的修复方式：

方式一：统一结构（推荐） #

把右侧的headerSubDiv放到和左侧一样的headerDiv容器中，让结构完全对齐：

<div class="computerSection">
  <div class="headerTitle">
    <p>Computer's choice:</p>
  </div>
  <!-- 添加headerDiv容器 -->
  <div class="headerDiv">
    <div class="headerSubDiv"><img class="computerImg" src="https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></div>
  </div>
</div>

这样右侧的headerSubDiv会和左侧一样，作为水平flex容器的子元素，自动触发收缩行为。

方式二：调整flex属性 #

如果不想修改结构，可以给computerSection添加align-items: center，同时给headerSubDiv添加width: 100%和min-width: 0，让它能在水平方向收缩：

.computerSection{
  text-align: center;
  display: flex;
  flex-direction: column;
  border-left: solid;
  border-color: black;
  border-width: 2px;
  padding: 0px 40px;
  flex-grow: 1;
  align-items: center; /* 添加这行 */
}

.headerSubDiv {
  transition: 0.7s;
  border-radius: 50%;
  max-width: 100px;
  max-height: 100px;
  width: 100%; /* 添加这行 */
  min-width: 0; /* 添加这行 */
}

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