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 resolut

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 */
}

     
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!
  
KK
      
18:42

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