CSS Flexbox columns are overflowing

Question

I want to build a layout with CSS flexbox and I got into a problem while building a calculator.

I have a #controller that contains all my buttons on the calculator. The "=" button's size is twice the other buttons (vertically).

The bottom of the layout is like this (I cant upload pictures) ...

| 4 | 5 | 6 | / |
| 1 | 2 | 3 | = |
| . | 0 | % | = |

So I created div "rows" for the normal buttons in which they are set to flex-grow: 1; so it stays responsive to the width.

I made a div container called ".bottom" for the left and right "columns". The left contains the rows and the normal sized buttons, and the right contains the "=" button.

Problem:
Both columns inside the .bottom part are overflowing from the #controller with their content.

I don't necessarily want to wrap my layout. I figured out maybe I should create only columns, not rows, but before that I wanted to ask for advice. Thank you in advance!

HTML bottom part:

<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;
}

Answer 1

Just place all the buttons in a CSS-Grid. To let an element occupy 2 rows you can use grid-row: span 2 on that element.

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
  max-width: 200px;
}

.row-2 {
  grid-row: span 2;
}

<div class="calculator-grid">
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>/</button>
  
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button class="row-2">=</button>
  
  <button>.</button>
  <button>0</button>
  <button>%</button>
  <!-- empty for equal button -->
</div>