Flexbox isn't work in chrome

[Ayala]

Why it is not working?

I write the needed prefixes:

http://codepen.io/Ayalann/pen/oYpjVe

[robkwood]

It is working, you just haven’t told it to do very much :-)

By default, setting display: flex; will caused flexed elements to sit next to each other horizontally. Try adding something like justify-content: center; to see a more noticeable change, and give this great guide to Flexbox’s functionality a read – https://css-tricks.com/snippets/css/a-guide-to-flexbox/ in order to get it doing what you want.

[Ayala]

I have forgotten to mention the point :)

The point is that it has to be responsive.
The first and the second picture has to be cutted while I reduce the size of the screen, and the third one is fixed.

In Firefox it is responsive.
In Chrome it is not. Why?

[robkwood]

Ahh I see. So just to make sure I’m understanding what you’re looking for – you want pictures 1 and 2 to be cut off on smaller screens, while the third picture remains the same size?

To ensure you get that behaviour across browsers, you could give pictures 1 and 2 a ‘max-width’ property. For example, you might try max-width: 20%; height auto to ensure they shrink with screen size.

For what it’s worth though, if you want a gallery of responsive images I’d be inclined to set flex-wrap on the .boxes container, and maybe change flex-direction to column on smaller screens :)

[bearhead]

I’m not sure why firefox is behaving differently than chrome or IE in this case, but here is a fix that should work on all three:
http://codepen.io/kvana/pen/eByGQP
It will require you to wrap the imgs in divs though.

[Ayala]

Robkwood: Yes you understand what I want.
But with the “max-width” the pictures will be stretched.

Bearhead’s solution: it doesn’t work in Chrome.

It should be solved in easier way. Not with flexbox.
I am trying….

[bearhead]

Could you describe what you mean by “isn’t working”? The version I posted has basically the same behavior on chrome, ff, and ie as your original did on ff.

I’m running chrome 54.0.2840.99 m on windows 10.

[Ayala]

My Firefox and my Chrome isn’t do the same thing. The height of images is changing, reducing.
The aim is that the height is fix, only the width should be changed.

Version of my chrome is 49.
There is something which it doesn’t support?

[bearhead]

Maybe there is a difference in how each version implements flexbox? You could try moving the height:400px; declaration from .fix toimg

[Ayala]

you are right, it is working, I checked it in an other Chrome.
But the explorer doesn’t support the object-fit.

I need an other solution.

[Author]

Posts