内容溢出滚动导致容器圆角失效问题求助

我正在制作卡片布局，代码如下：

布局代码 #

<div style={{ display: "flex", flexDirection: "column", alignItems: "start", width: "100%", height: "auto", padding: "2rem", gap: "1rem", borderRadius: "2rem", backdropFilter: "blur(4rem)", background: "goldenrod", }}>
  <div className="text-3xl unselectable font-bold" style={{display: "flex", flexDirection: "row",alignItems: "center",width: "100%", height: "3rem", }}>
    <div style={{ width: "auto", height: "3rem", alignItems: "center", display: "flex" }}>
      <Meteor weight="fill" color="#f2f2f2" /> { /* Phosphor Icons */}
    </div>
    <div style={{ width: "0.5rem", height: "100%" }}></div>
    Technologies and Mastery
  </div>

  <div className="card-container-grid-2">
    <div className="card">Hello</div>
    <div className="card">Hello</div>
    <div className="card">Hello</div>
    <div className="card">Hello</div>
    <div className="card">Hello</div>
    <div className="card">Hello</div>
    <div className="card">Hello</div>
    <div className="card">Hello</div>
  </div>
</div>

样式代码 #

.card-container-grid-2 {
  padding: 1rem;
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr));
  grid-auto-rows: 12rem;
  width: 100%;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  border-radius: 0.5rem;
}

卡片渲染正常，但容器出现Y轴内容溢出，导致左下角和右下角的圆角被破坏。尝试控制滚动溢出后，滚动条无法滚动且圆角问题仍未解决，请问该如何修复？

核心问题 #

1. 外层容器用height: auto，没有高度限制，加overflow-y: auto也无法触发滚动。
2. 内层卡片容器设置height: 100%，强制撑满父容器，导致内容溢出时直接突破外层容器圆角。

修复步骤 #

1. 给外层容器设置高度限制并启用滚动

将外层容器的height: auto改为固定/相对高度，同时添加滚动属性和盒模型设置，确保内容在容器内滚动：

<div style={{ 
  display: "flex", 
  flexDirection: "column", 
  alignItems: "start", 
  width: "100%", 
  height: "80vh", // 可根据需求改为固定值（如600px）或其他相对高度
  padding: "2rem", 
  gap: "1rem", 
  borderRadius: "2rem", 
  backdropFilter: "blur(4rem)", 
  background: "goldenrod",
  overflowY: "auto", // 启用垂直滚动
  overflowX: "hidden",
  boxSizing: "border-box" // 让padding包含在容器高度内，避免额外溢出
}}>

2. 移除卡片容器的强制高度设置

去掉.card-container-grid-2的height: 100%，让它根据内容自适应高度：

.card-container-grid-2 {
  padding: 1rem;
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr));
  grid-auto-rows: 12rem;
  width: 100%;
  /* 移除 height: 100% */
}

3. 可选：优化滚动条样式（避免破坏圆角）

如果默认滚动条影响视觉，可自定义样式让它贴合容器圆角：

/* 给外层容器加一个类名（比如outer-card-container）后使用以下样式 */
.outer-card-container::-webkit-scrollbar {
  width: 8px;
}
.outer-card-container::-webkit-scrollbar-track {
  background: transparent;
}
.outer-card-container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

修复原理 #

• 外层容器设置固定高度后，overflow-y: auto才能生效，内容超出时会在容器内部滚动，不会突破圆角。
• 移除卡片容器的height: 100%，避免强制撑满父容器导致的溢出问题。
• box-sizing: border-box确保padding不会额外增加容器总高度，防止意外溢出。

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