CSS Flexbox columns are overflowing

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

>Solution :

CSS grid is the way to go here. You can use grid-template areas to span cells like the calculator example I’ve done below. There’s a great primer here and a good video by Kevin Powell here

I’ve knocked up an example to get you started.

.bottom {
      display: grid;
      width: 50%;
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas: "b4 b5 b6 bdiv""b1 b2 b3 bequals""bdot b0 bpercent bequals";
      gap: 0.5rem;
    }

    .bottom>div {
      /* aspect-ratio: 1; */
      background-color: lightgray;
      display: grid;
      place-items: center;
      padding-block:1rem;
      transition: background-color 0.2s;
      cursor: pointer;
    }
    .bottom>div:hover {
      background-color:darkgray;
    }

    .button-1 {
      grid-area: b1;
    }

    .button-2 {
      grid-area: b2;
    }

    .button-3 {
      grid-area: b3;
    }

    .button-4 {
      grid-area: b4;
    }

    .button-5 {
      grid-area: b5;
    }

    .button-6 {
      grid-area: b6;
    }

    .button-div {
      grid-area: bdiv;
    }

    .button-percent {
      grid-area: bpercent;
    }

    .button-dot {
      grid-area: bdot;
    }

    .button-long {
      grid-area: bequals;
    }

<div id="calculator">
    <!-- screen of calculator -->
    <div id="controller">
      <!-- upper part of button rows -->
      <div class="bottom">
        <div class="button-4">4</div>
        <div class="button-5">5</div>
        <div class="button-6">6</div>
        <div class="button-div">/</div>
        <div class="button-1">1</div>
        <div class="button-2">2</div>
        <div class="button-3">3</div>
        <div class="button-dot">.</div>
        <div class="button-0">0</div>
        <div class="button-percent">%</div>
        <div class="button-long">=</div>
      </div>
    </div>
  </div>