Flex re-sizable children cannot be resized in Firefox

Question

I just got into the flex world and am struggling a little with a setup like this one: https://jsfiddle.net/5b0pLgkj/

In Chrome and Safari it works perfectly, children elements can be re-sized and they take the full empty space of the container. In Firefox, however, flex:1 does not seem to do anything and children can't be resized (although the height seems to be changing in the DOM).

Is it really necessary to use flex:auto?. When I do that it seems to work but children no longer take all the empty space. Any thoughts?

Thank you!

for reference: [https://stackoverflow.com/q/37306138/6191987](https://stackoverflow.com/q/37306138/6191987) — vishnu, Jul 13 '18 at 05:25
Thank you but my issue has nothing to do with prefixes (I'm not even targeting old browsers) — elmango, Jul 13 '18 at 05:27
Works same for me in Chrome and Firefox. Try to update your Firefox. — Masood, Jul 13 '18 at 06:05

caiovisk · Answer 1 · 2018-07-13T05:43:50.547

0

flex:1; it is equivalent to flex: 1 1 0n;

In Chrome for example flex:1 and flex:1 1 0; produce different results because flex-basis is ignored and only flex-grow and flex-shrink are applied.

So, your flex-basis is set to zero and FF read it as 0, which do not work for your the desired effect.

Set it to flex: 1 1 auto; or simply flex: auto;

Flex is the shorthand for flex-grow, flex-shrink and flex-basis.

See: https://css-tricks.com/almanac/properties/f/flex/

edited Jul 13 '18 at 05:43

answered Jul 13 '18 at 05:32

caiovisk

3,667
1
12
18

Isn't `flex: 1 1 auto` equivalent to `flex:auto`?. Unfortunately as I mentioned in the question, the children do not take the full space and the resizing doesn't work in Edge. – elmango Jul 13 '18 at 05:40

Flex re-sizable children cannot be resized in Firefox

1 Answers1