Flex ignores 100% width

Asked May 09 '16 at 22:24

Active May 09 '16 at 23:29

Viewed 71 times

Why does flex ignore the width set on some items, but obey the widths set on others?

I want to use flex for a grid system where sometimes I want items that are 100% in width.

In this linked example I want the items to obey the widths they are give. .full should be 100% width across the screen while .one-third and .two-thirds should obey their respective widths of 33.3% and 66.6%

But instead, everything squeezes onto one line.

.grid.full {
  width: 100%;
}

.grid.one-third {
  width: 33.33%;
}

.grid.two-thirds {
  width: 66.66%;
}

edited May 09 '16 at 23:29

Michael Benjamin

346,931
104
581
701

asked May 09 '16 at 22:24

user1486133

1,309
3
19
37

I opened your codepen and your full is 100% across (800px), one-third and two-thirds are on the next line. – haltersweb May 09 '16 at 22:35
What browser are you looking at this in? – haltersweb May 09 '16 at 22:35
your codepen looks okay, just the way you want it to behave... – Johannes May 09 '16 at 23:31
3

You don't have autoprefixer or prefixfree enabled, so I imagine that you may be running into cross-browser issues. – zzzzBov May 09 '16 at 23:32
The observation by @zzzzBov makes sense. Here are some more details: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin May 09 '16 at 23:46

Flex ignores 100% width

0 Answers0