Flexbox父容器flex-wrap换行后宽度不收缩问题求助

我懂你遇到的困扰了——Flex子元素在小屏幕能自动换行，但设置了max-width的父容器却没跟着收缩，它的box-shadow还保持着最大宽度时的尺寸，看起来特别别扭对吧？

问题根源分析 #

你的父容器.social-container同时设置了position: absolute、left: 0和right: 0，这会强制容器撑满水平方向的可用空间，完全无视Flex子元素换行后的实际宽度。所以哪怕子元素换行了，父容器还是会维持最大宽度或者撑满屏幕，box-shadow自然也不会跟着收缩。

解决方案 #

要让父容器能根据子元素的实际宽度自适应，同时保留居中效果，我们可以调整定位相关的设置：

1. 移除left: 0和right: 0，避免强制撑满宽度
2. 给父容器的父元素添加position: relative，确保绝对定位的容器有正确的参考坐标
3. 保留margin: 0 auto来维持居中效果

修改后的完整代码 #

HTML（无需改动）

<!--======== SOCIAL SECTION ========--> 
<section id="social" class="social"> 
  <div class="social-container"> 
    <div class="social-container-half"> 
      <div class="insta-header"> 
        <h4 class="h4-display">INSTAGRAM</h4> 
      </div> 
    </div> 
    <div class="social-container-half"> 
      <div class="twitter-header"> 
        <h4 class="h4-display">TWITTER</h4> 
      </div> 
    </div> 
  </div> 
</section>

CSS（调整关键属性）

.social {
  /* 添加相对定位，作为绝对定位子容器的参考 */
  position: relative;
}

.social-container {
  max-width: 1150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 30px;
  background-color: yellow;
  /* 移除强制撑满宽度的属性 */
  /* left: 0;
  right: 0; */
}

.social-container-half {
  box-sizing: border-box;
  width: 575px;
  background-color: white;
  border: 1px solid red;
  /* 可选：添加最小宽度，避免小屏幕下子元素过窄 */
  min-width: 300px;
}

这样修改后，当子元素换行时，父容器会自动收缩到子元素的总宽度，box-shadow也会跟着容器的实际尺寸变化，完美解决你的问题！

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