CSS卡片响应式布局问题：窗口缩小时卡片溢出页面如何解决？

我用CSS制作了一个简易卡片，尝试实现响应式布局，但通过DevTools调整窗口尺寸时，卡片会溢出整个页面。我了解overflow属性可避免此问题，但希望找到更优的设计方案。

问题展示 #

正常状态下的卡片样式：

窗口缩小后的卡片状态：

请问如何避免该溢出问题，或至少优化显示效果？

HTML代码 #

<body>
    <div class="container">
      <div class="card">
        <span class="circle">
          <svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
            <path
              d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
              fill="#FC7614"
            />
          </svg>
        </span>
        <h2>How did we do?</h2>
        <p>
          Please let us know how we did with your suppoer request. All feedback
          is appreciated to help us improve our offering!
        </p>
        <div class="rating">
          <span class="circle">1</span>
          <span class="circle">2</span>
          <span class="circle">3</span>
          <span class="circle">4</span>
          <span class="circle">5</span>
        </div>
        <button class="btn">SUBMIT</button>
      </div>
    </div>
  </body>

CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Overpass:wght@400;700&display=swap");

:root {
  --mobile-width: 375px;
  --desktop-width: 1440px;
  --btn-hover: hsl(0, 0%, 100%);
  --rating-hover: hsl(217, 12%, 63%);
  --body-background: #121417;
  --card-background: #252d37;
  --p-font-size: 15px;
  --p-color: hsl(216, 12%, 54%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Overpass", sans-serif;
  font-size: 15px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: var(--body-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* overflow: scroll; */
}

.card {
  width: 20rem;
  background-color: var(--card-background);
  padding: 20px;
  border-radius: 15px;
  max-width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.card > * {
  margin-bottom: 1rem;
}

.card h2 {
  color: var(--btn-hover);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 700;
}

.card p {
  color: var(--p-color);
  font-size: 15px;
  font-weight: 100 !important;
}

.card .rating {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.card .circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #30363f;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: 50%;
  color: var(--p-color);
}

卡片溢出的核心问题是评分栏的固定尺寸和间距在窄屏时超出容器宽度，以下是无需依赖overflow属性的优化方案：

1. 动态适配评分栏尺寸与间距 #

用clamp()函数让评分项的尺寸和间距随屏幕宽度自动调整，避免窄屏拥挤：

.card .rating {
  display: flex;
  justify-content: space-between;
  gap: clamp(0.5rem, 3vw, 1rem); /* 间距在0.5rem到1rem之间随屏幕变化 */
}

.card .circle {
  width: clamp(2rem, 8vw, 2.5rem); /* 评分圆尺寸随屏幕自适应 */
  height: clamp(2rem, 8vw, 2.5rem);
}

2. 限制卡片最小宽度与弹性内边距 #

防止卡片被过度压缩，同时让内边距适配不同屏幕：

.card {
  width: 20rem;
  min-width: 220px; /* 设置最小宽度，避免布局崩溃 */
  padding: clamp(1rem, 4vw, 20px); /* 内边距随屏幕宽度动态调整 */
  max-width: calc(100% - 2rem);
}

3. 优化文字排版避免溢出 #

确保标题和描述文本在窄屏时正常显示：

.card h2 {
  font-size: clamp(1.2rem, 5vw, 1.5rem); /* 标题字号自适应 */
  letter-spacing: 1px; /* 缩小窄屏字间距，避免换行混乱 */
}

.card p {
  word-wrap: break-word; /* 强制长单词换行 */
  line-height: 1.5; /* 增加行高提升可读性 */
}

4. 极端窄屏的兜底处理（可选） #

如果仍有溢出风险，给容器添加温和的溢出处理：

.container {
  overflow-x: auto; /* 仅在需要时显示横向滚动条 */
  padding: 1rem 0; /* 上下留白避免卡片贴边 */
}

以上调整能让卡片在全尺寸范围内保持布局完整，同时保留原有设计风格。

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