flex布局中按钮设置flex:1后无法均等宽度的问题求助

尝试让Sure和Cancel按钮拥有相同宽度，将它们放入设置了display: flex的flexbox容器中，并为.button.sure和.button.cancel添加flex:1属性，但弹性元素完全没有响应。原本认为给容器设置display:flex、子元素设置flex:1即可实现均等宽度，但不清楚为何无效。曾怀疑button标签影响flex:1生效，尝试将<button>嵌套在<div>中，同样没有效果。

原代码如下：

CSS #

.icon {
 background-color: lavender;
  height: 42px;
  width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 26px;
  color: royalblue;
}

.prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttonbox {
  display: flex;
  background: lavender;
}

.button{ 
  border-radius: 5px;
}

.button.sure {
  background: royalblue;
  color: white;
  flex: 1;
}

.button.cancel {
  background: white;
  color: royalblue;
  flex: 1;
}

HTML #

<div class="prompt">  
  <div class="icon">!</div>
  <div class="buttonbox"> 
    <button class="button sure">Sure</button>
    <button class="button cancel">Cancel</button>
   </div>
</div>

问题出在.prompt的align-items: center属性上——这个属性会让它的flex子元素（也就是.buttonbox）的宽度收缩到刚好包裹内容的尺寸。此时.buttonbox里的按钮即使设置了flex:1，也只能在这个狭窄的宽度里分配空间，自然看不出均等宽度的效果。

只需给.buttonbox添加以下任一属性即可解决：

• width: 100%：让按钮容器占满父容器的可用宽度
• align-self: stretch：覆盖.prompt的align-items: center，让容器拉伸至父容器宽度

修正后的CSS代码（以添加width:100%为例）：

.icon {
 background-color: lavender;
  height: 42px;
  width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 26px;
  color: royalblue;
}

.prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttonbox {
  display: flex;
  background: lavender;
  width: 100%; /* 新增这行 */
}

.button{ 
  border-radius: 5px;
}

.button.sure {
  background: royalblue;
  color: white;
  flex: 1;
}

.button.cancel {
  background: white;
  color: royalblue;
  flex: 1;
}

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