CODEWITHSUNDEEP
htmlcsssafariflexbox
Connorelsea
Connorelsea

Reputation: 2438

Flexbox child element extending beyond bounds of parent only on Safari

This is the structure of the episode box. display: flex is applied to the div with the class of episode.

The h2 is not expanding to change its parent's width on Safari? Any reasons why?

Here is the code, simple PostCSS with nesting and auto-prefixing: https://gist.github.com/Connorelsea/897cf41f7b9e43bdce43

episode box

Rendered on Safari:

enter image description here

Rendered on Firefox:

enter image description here

Upvotes: 1

Views: 1159

Answers (2)

Michael Schultz
Michael Schultz

Reputation: 130

This has been fixed in Safari 10.0.1. Seems this was a bug in older versions of Safari (v9) and how they handle flexbox.

Upvotes: 1

Gykonik
Gykonik

Reputation: 668

I think, that your problem is the Cross-Browser-Support for CSS-Flexbox

Try this (should work in all browsers)

.foo {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }

(Ofc with the right options)

Upvotes: 0

Related Questions