CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

xin song
xin song
1,929 Points

Flex-basis: 0 still break the line when narrowing the browser.

.container { display: flex; flex-wrap: wrap; }

.item { flex-grow: 1; flex-basis: 0%;

/* flex: 1;*/ }

I tried to use shorthand or non-shorthand get the same results using Opera Chrome Safari on pc and mac. In chrome dev tool the computed value show me that "flex-basis" is already set to 0%. On caniuse.com flex-basis is fully supported, i don't think browser version to be the problem. The only way i found here is use over-flow: hidden. Is there other way to get the same result as the video?

1 Answer

Mathias OVIEVE
Mathias OVIEVE
11,278 Points

Did you resize the window with the dev tool ? Had the same issue with the dev tool not showing proper result in Chrome.

If you resize the browser window manually everything will works as expected.