All geek questions in one place

Why do I have different behavior in Safari and Chrome with flexbox?

I show a series of images. Here is my html :

 <div class="flex"> <img src="img1.jpg"/> <img src="img2.jpg"/> <img src="img3.jpg"/> <img src="img4.jpg"/> </div>

Here is my css :

 .flex { display: flex } img { height: auto; }

I want my images to appear in a row. I didn’t give img any width, so Chrome Chrome takes its natural width and pops out more than the screen. This is how I want it to work. With Safari they flexbox will only handle viewport width. I tried to set the image width, flex-basis, but cannot use Safari more than just the visible screen. Is there a flexbox issue that I don't know about? What else can I do?

+5
source share
2 answers

This seems to be a bug in Safari. Try adding flex-shrink: 0 to img .

 img { height: auto; flex-shrink: 0; -webkit-flex-shrink: 0; }

With the webkit prefix to support older Safari browsers - I would add it to .flex too, as james suggests (note for yourself: upgrade Safari).

+3
source

I think safari needs the -webkit options for it to work. eg

 .flex { display: flex; display: -webkit-flex; } img { height: auto; }

This is the same for all parameters. eg

 justify-content: center; -webkit-justify-content: center; align-items: stretch; -webkit-align-items: stretch;

This page is a good reference source for flexbox:

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

0
source

Source: https://habr.com/ru/post/1247166/

More articles:


All Articles