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