设置min-width的子元素：调整窗口时避免超出父容器

我太懂这种抓狂的感觉了！当窗口缩小到子元素触发min-width:30rem后，它直接超出父容器边界，哪怕父容器还有可用空间——这确实让人摸不着头脑。其实核心问题是父容器默认不会为超出的子元素提供横向滚动能力，我们只需要给父容器加一行CSS就能解决，同时保留子元素的自适应和最小宽度特性。

解决方案步骤 #

• 给子元素的父容器（这里是.row）添加overflow-x: auto：当子元素宽度超过父容器时，父容器会自动显示横向滚动条，子元素就能在容器内滑动，不会溢出。
• 可选优化：给父容器加左右内边距，避免滚动条紧贴内容；给子元素加上box-sizing: border-box，确保padding不会额外增加宽度。

修改后的完整代码 #

CSS #

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.tl {color: white;}

.section {
  position: relative;
  display: flex;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 2.48832rem 0;
}

.row {
  position: relative;
  justify-content: center;
  margin: auto;
  width: 80%;
  box-sizing: border-box;
  background: blue;
  width: 90%;
  right: 5%;
  justify-content: flex-start;
  padding: 4.299rem 0;
  /* 核心：让父容器支持横向滚动 */
  overflow-x: auto;
  /* 优化：增加左右内边距，提升视觉体验 */
  padding-left: 1rem;
  padding-right: 1rem;
}

.one-col.col-1 {
  position: relative;
  width: 50%;
  margin: 0;
  padding: 3.583rem 2rem;
  left: 40%;
  background: #172731;
  min-width: 30rem;
  top: 7rem;
  color: white;
  /* 确保padding不会额外增加元素宽度 */
  box-sizing: border-box;
}

HTML #

<section class="section">
  <div class="row">
    <div class="one-col col-1">
      <h3 class="tl">Title</h3>
      <h3 class="tl"><span id="customerbase">Do your thing</span></h3>
      <hr>
      <p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="seework" href="#">SEE WORK</a></p>
    </div>
  </div>
</section>

原理说明 #

当窗口缩小到子元素的50%宽度小于30rem时，min-width会生效，子元素固定为30rem宽。此时如果父容器的宽度小于30rem（加上子元素的left:40%偏移后更明显），overflow-x: auto会让父容器生成横向滚动条，子元素就可以在父容器范围内滑动，不会溢出到页面外部。

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