Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Boris Kamp
Boris Kamp
16,660 Points

flex item displaying different in Safari

Hi guys!

Please see this page: http://hijsservice.wpengine.com/projecten/

When viewed in Chrome, the orange button 'bekijk' is aligned right, and only as wide as it should be. When viewed on Safari however, the button is full width! Same goes for the button in the three project summary at the bottom of this page: http://hijsservice.wpengine.com/diensten/

I have no clue what I'm doing wrong here, why is my button full width only on Safari?

Thanks guys!

1 Answer

David McNeill
David McNeill
44,438 Points

Hi Boris,

Welcome to Flexbox! There are still a number of cross-browser quirks in its implementation, which you just need to accept and work around for now.

In terms of your problem, the default behaviour for flex-items with no declared width/height values (i.e. using padding to give them width and height) is to stretch to fill their container. As far as I'm aware, Chrome is a bit smarter than Safari in maintaining a flex-item's dimensions in this situation, but I could be wrong. To fix it though, add 'align-items: flex-end' to your outer parent container (.archive-item__content). This changes this default behaviour and forces Safari to respect the dimensions of your button whilst aligning it to the right-hand side of the container.

Be sure to check out CSS Tricks' guide to Flexbox; for me it's the best guide on the Web: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this helps!

David

Boris Kamp
Boris Kamp
16,660 Points

Awesome David! Thanks!