CSS Flexbox 列溢出

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>

Answer 2

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>