Top "Flexbox" questions

Equal height columns with centered content in flexbox

I'd like to have two columns of equal height and their content should be middle aligned, so in the very …

html css flexbox semantic-ui

image is not resizing in a flexbox layout

I tried to follow the advice in this answer, and as shown in this CodePen, but the image that needs …

html css flexbox responsive-images

Image stretching in flexbox in Safari

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with …

css image safari flexbox height

Equal width flex items even after they wrap

Is it possible to make a pure CSS solution like this: Items have some min-width. They should grow dynamically to …

html css flexbox css-grid

Flexbox, z-index & position: static: Why isn't it working?

According to flexbox specification: ..4.3. Flex Item Z-Ordering ,... and z-index values other than auto create a stacking context even if position …

html css z-index flexbox

Flexbox: How to Combine percent, pixels and remaining height on columns?

I'm building basic grid system and need to combine height of flex-items described in different size units, which are %, px …

css height flexbox stretch

Why is padding expanding a flex item?

In the snippet below, the first row has two divs with flex-grow: 1. As expected, each div takes up 50% of the …

html css flexbox border-box

How to offset flex item?

I'm developing a pure flexbox grid framework called flexboxes. I'm looking to implement a way to offset flex items by …

css flexbox margin grid-system

IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix

The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent: <…

css flexbox internet-explorer-11 internet-explorer-10

ScrollView with flex 1 makes it un-scrollable

I'm trying to run flex on a ScrollView, and as long as the ScrollView has flex: 1 the scroll inside does …

react-native flexbox react-native-android react-native-scrollview