solved-by-flexbox
solved-by-flexbox copied to clipboard
Consider recommending a max-width for grid examples
I took your grid example and added some SASS to get to a normal-ish 12 column layout. All was well and good until I put in a <pre>
block with long lines. This blows out the cell and they no longer equally share the space.
The fix is simple — add a max-width
that matches the percentage of the flex:
.Grid--1of2 > .Grid-cell {
flex: 0 0 50%;
max-width: 50%; // Add me
}
Also, I just noticed that a lot of those properties are missing a semicolon at the end, is that intentional?
Thanks for the great site! It makes using Flexbox super easy and makes me wish I didn't have to support IE9 at work!
pre{
white-space: pre-wrap;
}