使用flexbox实现50%等宽图文布局时内容溢出边框的问题

问题根源 #

• flex布局父容器.feature未设置换行规则，小视口下左右两个子项强制挤在同一行，内容宽度超出父容器宽度就会溢出
• 图片元素未限制最大宽度，原生图片尺寸会撑开flex子项宽度
• 固定大内边距在窄屏场景下额外占用可用宽度，进一步挤压内容空间
• 文本没有强制换行规则，特殊场景下长文本会撑破容器

修复后的CSS代码 #

.features {
  display: flex;
  justify-content: center;
  margin: 200px 0;
  margin-bottom: 280px; 
  /* 新增：保证features容器宽度不超出视口 */
  width: 100%;
  box-sizing: border-box;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px solid gray;
  border-radius: 20px;
  box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.15);
  margin: 40px 30px;
  /* 新增：小屏幕下自动换行 */
  flex-wrap: wrap;
  /* 新增：保证内边距边框都算在宽度内 */
  box-sizing: border-box;
  /* 新增：限制最大宽度，避免超大屏下太宽 */
  max-width: 1300px;
  /* 新增：溢出隐藏，极端情况也不会漏内容 */
  overflow: hidden;
}

.flex-left {
  flex: 1;
  padding: 60px;
  max-width: 680px;
  /* 新增：盒模型规则 */
  box-sizing: border-box;
  /* 新增：文本强制换行 */
  overflow-wrap: break-word;
  word-break: break-word;
  /* 新增：最小宽度，换行前不会被挤压得过窄 */
  min-width: 300px;
}

.flex-left h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.flex-left p {
  font-size: 1.125rem;
  color: var(--gblue);
}

.flex-right{
  flex: 1;
  max-width: 620px;
  width: 100%;
  height: auto;
  padding: 50px;
  /* 新增：盒模型规则 */
  box-sizing: border-box;
  /* 新增：限制图片最大宽度，不会超出父容器 */
  max-width: 100%;
  /* 新增：最小宽度，换行前不会被挤压得过窄 */
  min-width: 300px;
  /* 新增：保持图片比例 */
  object-fit: contain;
}

/* 新增：小屏幕响应式调整 */
@media (max-width: 768px) {
  .flex-left {
    padding: 30px 20px;
  }
  .flex-left h2 {
    font-size: 1.8rem;
  }
  .flex-left p {
    font-size: 1rem;
  }
  .flex-right {
    padding: 20px;
  }
  .feature {
    margin: 20px 15px;
  }
}

补充说明 #

所有flex子项添加box-sizing: border-box保证内边距不会额外增加盒子宽度，flex-wrap: wrap保证小屏幕下左右两个模块自动上下堆叠，min-width设置了换行阈值，避免两个模块挤压到过窄导致内容变形。

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