解决CSS Grid布局中内容溢出的问题

核心问题在于CSS Grid的1fr列会默认尊重内容的最小宽度，当你列内的按钮、输入框有固定字号、padding这类无法无限压缩的属性时，网格列会停止收缩，最终超出容器导致溢出。以下是具体修复方案：

修复步骤 #

• 给主网格容器main添加min-width: 0，打破浏览器默认的「容器不能小于内容最小宽度」限制，让容器可以随视窗收缩
• 调整按钮容器.btn-cntr的网格布局，把固定比例的列换成自适应的repeat(3, 1fr)，让按钮自动填充可用宽度
• 给输入框、按钮添加max-width: 100%，确保它们不会超出父容器范围
• 给右侧大字号的.amount文本添加换行属性，避免单行溢出
• 把主容器的固定width:70%改成width: min(70%, 900px)，在大屏限制宽度，小屏自适应收缩

修改后的完整代码 #

CSS #

body {
  font-family: 'Space Mono', monospace;
  background-color: hsl(185, 41%, 84%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0; /* 移除默认body边距，避免溢出视窗 */
}

.logo {
  margin-bottom: 3em;
}

main {
  width: min(70%, 900px); /* 自适应宽度，最大900px */
  min-width: 0; /* 关键：允许容器收缩到小于内容最小宽度 */
  height: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  background-color: white;
  border-radius: 1.2rem;
  padding: 2em;
  box-sizing: border-box; /* 让padding算在容器宽度内，避免溢出 */
}


/*Left main*/

label {
  font-size: 1rem;
  color: #5E7A7D;
}

input {
  border: none;
  background-color: #F3F9FA;
  font-weight: 800;
  font-size: 1.5rem;
  color: #00474B;
  padding: 0.2rem 1rem;
  width: 90%;
  max-width: 100%; /* 防止输入框超出父容器 */
  box-sizing: border-box;
}

.btn-cntr {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 自适应三列 */
  grid-template-rows: repeat(2, auto); /* 行高随内容自适应 */
  gap: 10px;
}

button {
  width: 100%; /* 按钮填充满网格列 */
  background-color: hsl(183, 100%, 15%);
  border: none;
  border-radius: 0.2rem;
  padding: 0.5em 0.9em;
  font-size: 1.5rem;
  color: white;
  box-sizing: border-box;
}

.custom {
  background-color: #F3F9FA;
  color: #547878;
  font-size: 1.5rem;
}


/*Right main*/

.right {
  display: flex;
  flex-direction: column;
  height: 100%; /* 改成100%填充主容器高度 */
  border-radius: 1.2rem;
  padding: 1em; /* 统一上下左右padding，避免左侧单独padding导致布局偏移 */
  background-color: hsl(183, 100%, 15%);
  color: white;
  font-size: 1rem;
  min-width: 0; /* 允许右侧列收缩 */
}

.small-text {
  font-size: 0.9rem;
  font-weight: 800;
  color: #7F9D9F;
}

.amount {
  color: hsl(172, 67%, 45%);
  font-size: 3rem;
  margin: 0;
  flex-shrink: 1;
  word-break: break-all; /* 文本溢出时换行 */
}

.reset-btn {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: hsl(183, 100%, 15%);
  background-color: hsl(172, 67%, 45%);
  margin-top: auto; /* 让重置按钮固定在底部 */
}

.total-sum {
  display: flex;
  justify-content: space-between; /* 让文本和金额分别对齐左右 */
  align-items: center;
  margin-bottom: 1.5em;
}

HTML #

<body>
  <img src="./images/logo.svg" class="logo" alt="logo: word splitter">
  <main>
    <section class="left">
      <label for="Bill">Bill</label>
      <br>
      <input type="text" id="Bill" placeholder="$">

      <p>Select Tip %</p>
      <div class="btn-cntr">
        <button class="percentage">5%</button>
        <button class="percentage">10%</button>
        <button class="percentage">15%</button>
        <button class="percentage">25%</button>
        <button class="percentage">50%</button>
        <button class="percentage custom">Custom</button>
      </div>

      <label for="n-pple">Number of People</label>
      <br>
      <input type="text" id="n-pple" placeholder="">
    </section>

    <section class="right">
      <div class="total-sum">
        <div>
          <p>Tip Amount / person</p>
          <p class="small-text">Subtotal included</p>
        </div>
        <p class="amount">$0.00</p>
      </div>

      <div class="total-sum">
        <div>
          <p>Total / person</p>
          <p class="small-text">Total bill split</p>
        </div>
        <p class="amount">$0.00</p>
      </div>
      <button class="reset-btn">Reset</button>
    </section>
  </main>
</body>

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