如何使overflow-x:scroll的子元素不改变父元素宽度

这个问题我之前也碰到过，核心原因是Grid布局里用fr单位的列，其子元素默认的min-width: auto会优先适配内容宽度，而非严格遵守Grid分配的比例。你的ul用了flex布局，默认会横向撑开所有内容，直接把父容器.container拉宽，进而打乱了3fr 2fr的列比例。

直接给你最适配Grid布局的解决方案，完全不需要固定宽度：

解决方案：给Grid子项添加min-width: 0 #

在.container的样式里加上min-width: 0，强制它遵守Grid分配的宽度限制，这样内部的滚动就能正常工作：

.container, .aside {
  border: solid 1px gray;
  min-width: 0; /* 关键新增样式 */
}

另外你可以把ul里重复的overflow属性合并，代码更简洁：

.ul {
  display: flex;
  list-style: none;
  padding: 0;
  overflow-x: scroll; /* 合并后只保留这一行即可 */
  width: 100%;
}

为什么这个方案有效？ #

Grid布局的默认规则是：用fr单位的列，会先计算子元素的最小内容宽度，再分配剩余空间。当子元素内部有超出宽度的内容时，min-width: auto会让子元素优先容纳内容，导致列宽被强行撑开。

设置min-width: 0后，子元素的最小宽度被限制为0，Grid会严格按照3fr 2fr的比例分配宽度，超出.container宽度的ul内容就会被隐藏并支持横向滚动，完全适配Grid的响应式布局。

修改后的完整代码 #

HTML（无需修改） #

<body>
<main class='main'>
    <section class='container'>
      <h1>This is the container with ul that overflows content</h1>
      <ul class="ul">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li><a href="#">Eight</a></li>
        <li><a href="#">Nine</a></li>
        <li><a href="#">Ten</a></li>
        <li><a href="#">Eleven</a></li>
        <li><a href="#">Twelve</a></li>
        <li><a href="#">Thirteen</a></li>
        <li><a href="#">Fourteen</a></li>
        <li><a href="#">Fifteen</a></li>
        <li><a href="#">Sixteen</a></li>
        <li><a href="#">Seventeen</a></li>
        <li><a href="#">Eighteen</a></li>
        <li><a href="#">Nineteen</a></li>
        <li><a href="#">Twenty</a></li>
      </ul>
    </section>
    <aside class="aside">
      <h1>This is the content</h1>
    </aside>
  </main>
</body>

CSS #

.main {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  max-width: 1024px;
  margin-inline: auto;  
}
.container, .aside {
  border: solid 1px gray;
  min-width: 0; /* 新增关键样式 */
}

.ul {
  display: flex;
  list-style: none;
  padding: 0;
  overflow-x: scroll;
  width: 100%;
}

.ul li {
  padding: 0.4rem 0.5rem;
}

这样修改后，导航栏会在.container内部横向滚动，同时完全遵守Grid布局的3fr 2fr比例，不需要固定宽度，完美适配响应式场景。

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