Flexbox Not Working In Safari

The layout I am creating isn't working in Safari though it works perfectly in Chrome. I have a feeling it has something to do with the .wrapper or the .frame but I have tried setti

Solution 1:

The issue is on your .content class. Specifically, in this section of code.

.content {
    display: block;
  flex: 11 auto;
  background: #ddd;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right:.5em;
  padding-bottom:.5em;
}

Safari still requires the -webkit- prefix to use flexbox. So you will need to add the -webkit- prefix to you flex property.

Example (JSFiddle):

.content {
    display: block;
  -webkit-flex: 11 auto;
  -ms-flex: 11 auto;
  flex: 11 auto;
  background: #ddd;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right:.5em;
  padding-bottom:.5em;
}