flexbox阻止子元素占满可用空间：600px断点仅显示2个choco-box失效

问题原因 #

布局失效主要由3个问题导致：

• 给.choco-box设置的固定宽度width: 350px和margin: auto优先级高于flex-basis，且自动边距会挤占flex容器的可用空间
• 未统一盒模型，盒子的padding、border会额外撑宽元素，导致flex-basis的百分比计算不符合预期
• 没有显式关闭flex子元素的自动缩放属性，默认的flex-grow和flex-shrink会调整元素宽度占满容器

具体修改方案 #

1. 先统一盒模型，在<style>标签最顶部添加以下规则，确保padding、border被算入元素宽度内：

* {
  box-sizing: border-box;
}

2. 在空的媒体查询块中添加样式，覆盖移动端的默认配置：

@media screen and (min-width: 600px) {
  .choco-box {
    /* 三个参数依次为：不允许放大、不允许缩小、基础宽度为50%减列间距预留值 */
    flex: 0 0 calc(50% - 15px);
    /* 覆盖移动端的固定宽度和自动边距 */
    width: auto;
    margin: 0;
    /* 保留最大宽度限制，避免超大屏下盒子过宽 */
    max-width: 350px;
  }
}

3. 修复HTML语法错误：你提供的代码里最后一个.choco-box的闭合标签缺少>，将</div修改为</div>即可避免解析异常。

如果需要调整列间距，只需要修改calc(50% - 15px)里减去的数值即可。

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