如何避免inline-block父元素在子元素换行后因外边距保持全宽？

这是个很常见的inline-block布局陷阱，核心原因在于inline-block元素的宽度是基于内部元素「不换行时的总宽度」计算的（也就是所谓的「首选宽度」）。哪怕窗口变窄导致内部的蓝色盒子换行，红色容器依然会保持最初计算出的那个首选宽度，不会跟着收缩。

最优解决方案：改用Flexbox布局 #

Flexbox天生支持容器根据内部元素的换行情况自适应调整宽度，只需要给.outer做一点修改就能解决问题：

.outer { 
  background: red; 
  display: flex; /* 替换原有的inline-block */
  flex-wrap: wrap; /* 允许内部元素自动换行 */
  gap: 50px; /* 用gap统一控制间距，比margin更简洁可控 */
}
.inner-1 { 
  height: 50px; 
  width: 250px; 
  background: green; 
  /* 移除原有的margin-right，改用gap管理间距 */
}
.inner-2 { 
  height: 50px; 
  width: 250px; 
  background: blue; 
}

<div class="outer">
  <div class="inner-1"></div>
  <div class="inner-2"></div>
</div>

调整后，当窗口宽度不足以容纳两个inner盒子时，蓝色盒子会自动换行，红色容器也会立刻收缩到当前行的最大宽度（也就是单个inner盒子的宽度），完美契合你的需求。

为什么原inline-block方案不行？ #

inline-block的宽度计算逻辑是：先假设内部所有元素都在同一行显示，算出总宽度作为自己的首选宽度；之后哪怕内部元素因为空间不足换行，它也不会重新调整自身宽度——这是CSS中inline-level元素的固有特性，不是bug，只是设计逻辑如此。

如果一定要坚持用inline-block（不推荐，Flexbox更省心稳定），可以尝试给.outer添加min-width: 0 + overflow: hidden的组合，但这属于临时hack，适配性远不如Flexbox。

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