flex items going off screen in ios safari

Question

I need to have three blocks in a row. The two on the right will have fixed width. The left block is a text block and should be flexible.

My code works in all resolutions in Edge, Firefox and Chrome, but not iOS Safari.

This is a screenshot from the real iPhone. You can see that it seems like a trash. The last 2 block get outside the screen, but I can't understand why.

.container {
  display: flex;
  justify-content: flex-end;
}

.left {
  border: 1px solid #808080;
}

.center {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

.right {
  border: 1px solid #008000;
}

<div class="container">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt doloribus, nihil deleniti expedita labore porro commodi consequuntur, corporis delectus nam, ipsa? Eius inventore est molestias ex, eos odio. Consequuntur, voluptatibus!</div>
  <div class="center">KK</div>
  <div class="right">18:42</div>
</div>

codepen: https://codepen.io/quinnvalor/pen/mwpPaz

Answer 1

An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink.

Clearly, Safari handles this behavior differently than other browsers.

For a cross-browser solution, override the default behavior.

Add flex-shrink: 0 to the fixed-width items.

.container {
  display: flex;
  justify-content: flex-end;
}
.left {
  border: 1px solid #808080;
}
.center {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
  flex-shrink: 0;  /* NEW */
}
.right {
  border: 1px solid #008000;
  flex-shrink: 0;  /* NEW */
}

<div class="container">
     <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt doloribus, nihil deleniti expedita labore porro commodi consequuntur, corporis delectus nam, ipsa? Eius inventore est molestias ex, eos odio. Consequuntur, voluptatibus!</div>
  <div class="center">KK</div>
      <div class="right">18:42</div>
</div>

https://codepen.io/anon/pen/JJMEGp