Flexbox not working in Safari

Question

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

Answer 1

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

.content {
    display: block;
  flex: 1 1 auto;
  background: #ffffd;
  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: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background: #ffffd;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right:.5em;
  padding-bottom:.5em;
}