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!
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.
Flexbox is very well supported across modern browsers, however there are a few issues that you might run into.
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.
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.
.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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With