In this sample HTML, the child flex item "B" sits next to "A" despite the parent having a flex-direction of column.
Removing height: 100% of child item "B", changing the container flex-direction to column or removing flex-wrap: wrap all stop this behaviour.
Why?
I expect B to be under A since its parent has a flex-direction of column and wrapping is allowed on this axis and the container axis.
Edit: The supposed duplicate doesn't answer anywhere why "B" goes next to "A" on the horizontal axis.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox</title><style> .container { display: flex; /* flex-direction: row */ flex-wrap: wrap; width: 200px; background-color: lightgray; } .parent { display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; } .child { width: 100%; background-color: lightblue; } .child--b { height: 100%; }</style></head><body><div class="container"><div class="parent"><div class="child">A</div><div class="child child--b">B</div></div></div></body></html>