为flex子项添加width后父元素尺寸异常，flex-grow布局失效如何解决？

问题复现代码 #

CSS 代码 #

/* Centering Gray Box Absolutely */

.gray-box {
  background-color: gray;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  /*From the top left corner of the div*/
  transform: translate(-50%, -50%);
  /*To make it from center*/
}


/* Flex for gray box  */

.gray-box {
  display: flex;
  justify-content: space-around;
}


/* Defining the block sizes */

.block {
  flex-grow: 1;
  /*Allow the boxes to take size of the parent*/
}

.red {
  flex-grow: 2;
  /*Making the red box grow twice as others in the parent*/
}


/* Adding WIte Boxes in Black block */

.black {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: space-around;
}

.whitebox {
  background-color: white;
  flex-basis: 50px;
  /*Never use width when using flex box*/
  /*Doesn't work for flex items*/
  width: 50px;
}

HTML 代码 #

<div class="gray-box">
  <!-- Black block with 3 white boxes -->
  <div class="block black" style="background-color: black">
    <div class="whitebox"></div>
    <div class="whitebox"></div>
    <div class="whitebox"></div>
  </div>
  <!-- Red Box with 3 White Rectangles -->
  <div class="block red" style="background-color: red"></div>
  <!-- Cyan Box with 3 White Circles -->
  <div class="block cyan" style="background-color: cyan"></div>
</div>

问题描述 #

为.whitebox添加width:50px后，.black盒子尺寸变大，父容器的flex-grow布局规则被破坏，如何解决？

解决方案 #

这是因为flex容器的子项（.black）默认align-items值为stretch，内部.whitebox的固定宽度会撑开父元素，导致flex-grow的比例分配失效。可以通过以下两种方式修复：

• 强制flex子项遵循比例分配：给.block类添加width: 0; min-width: 0;，让子项优先按flex-grow比例分配空间，而非被内部元素撑开：

  .block {
    flex-grow: 1;
    width: 0;
    min-width: 0; /* 确保窄容器下仍生效 */
  }
  

• 修改内部flex容器的对齐方式：将.black的align-items设置为center或flex-start，避免内部元素撑大父元素：

  .black {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  

另外，代码注释里“Never use width when using flex box”的说法并不准确——flex子项可以用width，但要注意主轴方向上flex-basis优先级高于width，交叉轴方向尺寸受align-items影响，只要处理好这些规则，就能避免布局冲突。

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