Flex formating in Safari

Question

I am having some issues with displaying content that has a flex box in safari. Here is the basic HTML code:

<div class="panel">
  <div class="panel-heading">Heading</div>
  <div class="panel-body">
    Body with a lot of content 
    Body with a lot of content 
    Body with a lot of content 
    Body with a lot of content 
    Body with a lot of content
    Body with a lot of content 
    Body with a lot of content 
    Body with a lot of content
    Body with a lot of content
  </div>
</div>

I'm writing is SASS and here is the basic styling of the content....

.panel{
  border: 1px solid black;
  display: flex;
  & > .panel-heading {
    border: 1px solid green;
  }
  & > .panel-body {
    border: 1px solid blue;
  }
}

The problem occurs in Safari only: The first flex item panel-heading is being overtaken by the second flex item panel-body.

Here is a JSFiddle for your viewing https://jsfiddle.net/kf8yybwx/1/

Answer 1 · 2016-07-08T05:04:08Z

July 8, 2016 5:04am

This post answered my question: http://stackoverflow.com/questions/32689686/overlapping-css-flexbox-items-in-safari

the solution that worked for me was to use:

flex-shrink: 0;

Answer 2 · 2016-07-07T19:56:11Z

July 7, 2016 7:56pm

Other student s were asking this same thing about Safari not working like the other browsers. Heres an article that list some info on this....not sure if you can use but hope it helps:

http://stackoverflow.com/questions/24899943/how-to-make-flex-box-work-in-safari

Welcome to the Treehouse Community

Looking to learn something new?

Drew Butcher

Drew Butcher

Flex formating in Safari

2 Answers

Drew Butcher

Drew Butcher

Cindy Lea

Cindy Lea