Flex布局中Div未按容器百分比呈现预期宽度的原因？

问题原因 #

核心问题是.section-offerings和.offerings-row缺少明确的宽度约束，导致每个offerings-row的实际宽度由内部内容撑开，而非统一继承父容器的最大宽度。即使给图标设置了20%的宽度，由于每行的总宽度不同，计算出的图标宽度自然不一致，最终造成文本无法对齐。

解决方案 #

给.section-offerings添加width: 100%，确保它在屏幕宽度小于1000px时也能占满可用宽度；同时给.offerings-row设置width: 100%，让每行都继承父容器的宽度，这样图标20%宽度的计算基数就统一了。

修改后的CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #eee;
  font-family: 'Lato', sans-serif;
  margin-top: 75px;
}

.section-offerings {
  width: 100%; /* 新增：确保容器占满可用宽度 */
  max-width: 1000px;
  margin: 0 auto;
}

.offerings-row {
  display: flex;
  align-items: center;
  width: 100%; /* 新增：让每行统一继承父容器宽度 */
}

.offerings-icon {
  width: 20%;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: darkorange;
}

替代方案（固定图标宽度） #

如果希望图标在父容器宽度≥1000px时固定为200px，可改用flex属性固定图标宽度，让描述部分自适应剩余空间：

.offerings-icon {
  flex-basis: 200px; /* 固定基础宽度 */
  flex-shrink: 0; /* 禁止宽度收缩 */
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: darkorange;
}

.offerings-desc {
  flex-grow: 1; /* 占据剩余可用空间 */
}

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