32 replies

Margin auto not working

in the picture below, blue box is my root div container inside the body. it is the only body child.(react app).
- the root div is flex with flex direction column. justify content and align items is set to center
- red is a main element with flex grow 1. it spans the whole height of the root div container. red box is NOT a flex container itself, but has a margin set to auto to center it horizontally and vertically. yes i know i can use justify content and align items on the root, but this is my setup right now.
- yellow box is a div which contains stuff denoted with green. it has its margin set to auto, just like its parent(main).

Since yellow box has its margin set to auto, i woul expect it to be vertical aligned. however that is not the case. Does it somehow ignore its parent(main), which is a flex child of the root div? please dont tell me how to change the css. i want to understand WHY this behavior occurs. thanks in advance. here is the codepen: https://codepen.io/pmevo/pen/KKGbpNM

CodePenpt

KKGbpNM

...