内容溢出和滚动造成圆角问题

Question

我正在尝试创建卡片布局。这是我的布局。

<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轴上有溢出，并且它在左下角和右下角打破了圆角。尝试控制滚动溢出，但滚动条不可滚动并且圆角仍然尖锐。我怎样才能解决这个问题？有什么建议吗？

Answer 1

在父 div 中使用 box-sizing: border-box;