4 replies

How is the size of nested flexboxes computed?

👀ui/ux

front-end

When a flexbox is in another flexbox, do the effects of

flex-shrink

flex-shrink

get computed for the inner or outer flexbox first?

During that computation, what size is assumed for the parent or child whose shrink computations didn't happen yet?

Here's an example where

.a

.a

and

.c

.c

start at

700px

700px

and have

flex-shrink: 1

flex-shrink: 1

but all elements end up with different sizes for some reason: https://jsfiddle.net/5ugbxe8y/1/

Nested flexbox shrinking - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

KP-C

Kevin Powell - Community•2mo ago•

4 replies

root

How is the size of nested flexboxes computed?

👀ui/ux

front-end

When a flexbox is in another flexbox, do the effects of

flex-shrink

flex-shrink

get computed for the inner or outer flexbox first?

During that computation, what size is assumed for the parent or child whose shrink computations didn't happen yet?

Here's an example where

.a

.a

and

.c

.c

start at

700px

700px

and have

flex-shrink: 1

flex-shrink: 1

but all elements end up with different sizes for some reason: https://jsfiddle.net/5ugbxe8y/1/

Nested flexbox shrinking - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

How is the size of nested flexboxes computed?

Similar Threads

How is the size of nested flexboxes computed?

Similar Threads

Similar Threads

Similar Threads