DIV element breaking in wrong place on iPhone Chome & Safari - confirmed resolution

Question

I have a simple web app that I'm building and for the life of me can't suss out why it's doing this. In Desktop Chrome, set to iPhone 12 Pro (I have a 13 Pro), the display appears absolutely perfectly in the window:

But when the site is deployed into IIS, on my phone I see this (this is a screengrab from my iPhone):

The buttons are inside a containing div, and the CSS is:

.buttons {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 60vw;
  margin: auto;
}

And the button specific styling is:

.number {
  width: 15vw;
  height: 15vw;
  margin: 2.5vw;
  font-size: 7.5vw;
  /*border-radius: 20vw;*/
}

This is the HTML content, showing the layout:

<div class="content">
  <div class="total">
    Sum Total: {{ sumTotal | currency :'GBP':'symbol':'1.2-2' }}
  </div>  
  <div class="list">
    <span class="amount" *ngFor="let values of listOfValues">
      {{ values.amount | currency :'GBP':'symbol':'1.2-2' }} | <i class="bi bi-trash float-right" (click)="remove(values)"></i>
    </span>
  </div>
  <div class="value">
    <div class="symbol">&pound;</div>
    <div class="box">{{ digit5 }}</div>
    <div class="box">{{ digit4 }}</div>
    <div class="box">{{ digit3 }}</div>
    <i class="bi bi-dot"></i>
    <div class="box">{{ digit2 }}</div>
    <div class="box">{{ digit1 }}</div>
  </div>
  <div class="buttons">
    <button class="number" (click)="add('7')">7</button>
    <button class="number" (click)="add('8')">8</button>
    <button class="number" (click)="add('9')">9</button>
    <!-- Break -->
    <button class="number" (click)="add('4')">4</button>
    <button class="number" (click)="add('5')">5</button>
    <button class="number" (click)="add('6')">6</button>
    <!-- Break -->
    <button class="number" (click)="add('1')">1</button>
    <button class="number" (click)="add('2')">2</button>
    <button class="number" (click)="add('3')">3</button>
    <!-- Break -->
    <button class="number" disabled><i class="bi bi-backspace"></i></button>
    <button class="number" (click)="add('0')">0</button>
    <button class="number" (click)="addAmount()"><i class="bi bi-plus-lg"></i></button>
    <!-- Break -->
  </div>
</div>

There is a working demo on StackBlitz which shows the buttons in the correct order.

Am I missing something here with CSS on mobiles? I can't understand why it just won't obey how it looks on the desktop. I've calculated the width of each button, then set the div width to be the sum total of this, with margin auto either side.

Answer 1

You need to use appearance: none to prevent system specific styling. [ref]

Use padding: 0 to keep text at centre when font gets too big. Also, explicitly set text color to black.

.buttons {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 60vw;
  margin: auto;
}

.number {
  width: 15vw;
  height: 15vw;
  margin: 2.5vw;
  
  padding: 0;
  font-size: 7.5vw;
  
  color: black;
  appearance: none;
}

.number[disabled] {
  color: #aaa;
}

<div class="buttons">
  <button class="number">7</button>
  <button class="number">8</button>
  <button class="number">9</button>
  <!-- Break -->
  <button class="number">4</button>
  <button class="number">5</button>
  <button class="number">6</button>
  <!-- Break -->
  <button class="number">1</button>
  <button class="number">2</button>
  <button class="number">3</button>
  <!-- Break -->
  <button class="number" disabled><</button>
  <button class="number">0</button>
  <button class="number">+</button>
  <!-- Break -->
</div>