Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 setting the Flex Shrink value to 0 to no avail.

JSFiddle

.frame {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    position: relative;
    overflow: hidden;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;  
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}

.wrapper {
    -webkit-flex: 1 0 auto !important;
    -ms-flex: 1 0 auto !important;
    flex: 1 0 auto !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

.row, 
.wrapper {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

I also feel there may be a better way of using Flexbox without the need for the wrapper but can't get my head around it.

Any help would be really appreciated!

like image 777
Chris Dance Avatar asked Mar 11 '15 00:03

Chris Dance


People also ask

Does flexbox work on Safari?

Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap . Gaps in Flexbox make it possible for web developers to create space between Flex items without resorting to annoying margin hacks.

Does flexbox work on all browsers?

Flexbox is very well supported across modern browsers, however there are a few issues that you might run into.

How do I activate flexbox CSS?

To activate Flexbox we simply use a CSS selector to select the parent div that contains the six children, then write display: flex; . By default Flexbox arranges the children in a horizontal row. That can be changed however by adding flex-direction: column to the parent class.


1 Answers

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

.content {
    display: block;
  flex: 1 1 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: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background: #ddd;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right:.5em;
  padding-bottom:.5em;
}
like image 96
Alexander O'Mara Avatar answered Oct 12 '22 13:10

Alexander O'Mara