solved-by-flexbox icon indicating copy to clipboard operation
solved-by-flexbox copied to clipboard

Consider recommending a max-width for grid examples

Open shepmaster opened this issue 9 years ago • 1 comments

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.

An example.

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!

shepmaster avatar Nov 09 '15 02:11 shepmaster

pre{
  white-space: pre-wrap;
}

awps avatar Apr 03 '16 18:04 awps