自适应场景下.grid超出容器破坏布局的修复方案咨询

当处于自适应状态时，.grid元素会超出body标签，破坏页面布局。期望.grid块能够撑满屏幕宽度，且在自适应时被父级.card块包裹，在.card内部可滚动。

HTML代码 #

<div class="root">
  <div class="sidebar"></div>
  <div class="wrapper">
   <div class="card">
<div class="grid">
  <p>Title</p>
  <p>Title</p>
  <p>Title</p>
  <p>Title</p>
  <p>Title</p>
  <p>Title</p>
  <p>Title</p>
  <p>Title</p>
  
    <p>Content Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>
  </div>
  </div>
</div>

CSS代码 #

body {
  margin: 0;
  background: #333;
}

.root {
  display: flex;
  width: 100%;
}

.sidebar {
  width: 220px;
  height: 100vh;
  background: lime;
}

.wrapper {
  flex-grow: 1;
}


.card {
  width: 100%;
  background: gray;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-column-gap: 20px;
}

@media (max-width: 700px) {
  .sidebar {
    display: none;
  }
}

经测试，单独运行.grid相关代码时表现符合预期，推测这是flexbox与grid组合使用时的问题，请问如何在当前代码中修复该问题？

问题根源在于flex容器的默认特性：flex子元素默认拥有min-width: auto，会导致子元素宽度不会小于自身内容宽度。当.grid的内容超出屏幕宽度时，.wrapper会被撑开，进而导致整个页面横向溢出。只需给.wrapper添加min-width: 0即可解决，具体修改如下：

修改后的完整CSS #

body {
  margin: 0;
  background: #333;
}

.root {
  display: flex;
  width: 100%;
}

.sidebar {
  width: 220px;
  height: 100vh;
  background: lime;
}

.wrapper {
  flex-grow: 1;
  min-width: 0; /* 关键修复：解除flex子元素的最小宽度限制 */
}

.card {
  width: 100%;
  background: gray;
  overflow: auto;
  box-sizing: border-box; /* 可选：确保宽度包含内边距和边框，避免额外溢出 */
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-column-gap: 20px;
}

@media (max-width: 700px) {
  .sidebar {
    display: none;
  }
}

原理说明 #

添加min-width: 0后，.wrapper会被限制在父级.root的宽度范围内，不再被内部.grid的宽内容撑开。此时.card的overflow: auto属性就能生效，让.grid在.card内部横向滚动，既保证.grid撑满可用宽度，又不会突破页面布局。

内容的提问来源于stack exchange，提问作者Данияр Булдаков