Skip to content

Instantly share code, notes, and snippets.

@markcarrrr

markcarrrr/flexbox.css

Last active April 18, 2018 18:25
Show Gist options
  • Save markcarrrr/218cc829a205e1a6387952b886547fae to your computer and use it in GitHub Desktop.
Save markcarrrr/218cc829a205e1a6387952b886547fae to your computer and use it in GitHub Desktop.
Download ZIP
Fix for issue in Safari when wanting to use 'position: absolute;' with flexbox
Raw
flexbox.css
/**
* Flexbox styles so Safari respects position: relative; on the flex item.
*/
.flex-box {
display: flex;
}
.flex-item {
display: flex; /* Fixes Safari issue with position: relative; */
flex: 1;
flex-direction: column; /* Fixes text not wrapping in IE10 introduced by using display: flex; */
position: relative;
}
/**
* Now you can use position: absolute; within .flex-item
*/
@romgrk
Copy link

romgrk commented Mar 8, 2017

Thanks, my savior :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment