CSS Flexbox列内容溢出：计算器布局调试求助

我想用CSS Flexbox构建计算器布局，遇到了布局溢出的问题。#controller容器包含所有计算器按钮，其中“=”按钮的垂直高度是其他按钮的两倍，底部预期布局如下：
| 4 | 5 | 6 | / |
| 1 | 2 | 3 | = |
| . | 0 | % | = |

我给普通按钮所在的row设置了flex-grow: 1以保证宽度响应式，同时创建了.bottom容器包含左右两列：左列放置普通按钮行，右列放置“=”按钮。

问题：
.bottom内的两列内容均从#controller中溢出，我不希望布局换行，考虑过仅用列布局，但想先寻求其他解决方案。

HTML代码 #

<div id="calculator">
  <!-- screen of calculator -->
  <div id="controller">
    <!-- upper part of button rows -->
    <div class="bottom">
      <div class="columnLeft">
        <div class="row">
          <div class="button">1</div>
          <div class="button">2</div>
          <div class="button">3</div>
        </div>
        <div class="row">
          <div class="button">.</div>
          <div class="button">0</div>
          <div class="button">%</div>
        </div>
      </div>
      <div class="columnRight">
        <div class="longButton">=</div>
      </div>
    </div>
  </div>
</div>

CSS代码 #

#calculator, #controller {
  display: flex;
  flex-direction: column;
}

#calculator {
  margin: auto;
  width: 50%;
}

#controller .row {
  display: flex;
}

#controller .bottom {
  display: flex;
  flex-direction: row;
}

#controller .bottom .columnLeft, #controller .bottom .columnRight {
  display: flex;
}

#controller .bottom .columnLeft {
  flex-grow: 3;
  flex-direction: column;
}

#controller .bottom .columnRight {
  flex-grow: 1;
}

.button, .longButton{
  flex-grow: 1;
}

问题根源在于容器没有明确的高度限制，且Flex项目的空间分配规则未完全适配布局需求，导致内容溢出。以下是修改后的CSS代码及说明：

#calculator, #controller {
  display: flex;
  flex-direction: column;
}

#calculator {
  margin: auto;
  width: 50%;
  height: 80vh; /* 给计算器设置明确高度，避免内容无限制扩展 */
}

#controller {
  flex: 1; /* 让控制器填充计算器的剩余空间 */
}

#controller .row {
  display: flex;
  flex: 1; /* 让每一行在左列中均匀分配高度 */
}

#controller .bottom {
  display: flex;
  flex-direction: row;
  flex: 1; /* 让底部区域填充控制器的剩余空间 */
}

#controller .bottom .columnLeft, #controller .bottom .columnRight {
  display: flex;
}

#controller .bottom .columnLeft {
  flex-grow: 3;
  flex-direction: column;
}

#controller .bottom .columnRight {
  flex-grow: 1;
  flex-direction: column; /* 让右列垂直布局，使=按钮占满整个列高度 */
}

.button, .longButton{
  flex-grow: 1;
  box-sizing: border-box; /* 确保内边距/边框不会增加元素总尺寸 */
  padding: 1rem; /* 添加内边距优化视觉效果 */
  border: 1px solid #ccc; /* 可选：添加边框区分按钮 */
}

修改说明 #

1. 给#calculator设置height: 80vh，让计算器有固定的可视高度，避免内容溢出页面。
2. #controller添加flex: 1，确保它填充计算器的剩余空间，限制按钮区域的范围。
3. 每个.row设置flex: 1，让两行按钮在左列中均匀分配垂直空间。
4. .bottom添加flex: 1，占据控制器的剩余空间，保证底部布局不会超出容器边界。
5. .columnRight设置flex-direction: column，让“=”按钮可以垂直拉伸，占满整个右列的高度，实现预期的双倍高度效果。
6. 给按钮添加box-sizing: border-box，防止内边距或边框导致元素尺寸超出容器，同时添加基础样式提升视觉体验。

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