So I have been learning CSS as a beginner . Recently I was exploring flex-box. My original knowledge of flex-wrap : wrap; is that if overflow occurs along the main axis (flex-direction) it prevents it by wrapping the items in the next row( suppose flex-direction : row;) What I don't seem to understand is that why it leaves gaps in the cross axis ? Please see the code down below
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Display Flex</title><link rel="stylesheet" href="display_flex.css" /></head><body><h1>Flexbox Playground</h1><div id="container"><div style="background-color: #9400d3">violet</div><div style="background-color: #4b0082">indigo</div><div style="background-color: #0000ff">blue</div><div style="background-color: #00ff00">green</div><div style="background-color: #ffff00">yellow</div><div style="background-color: #ff7f00">orange</div><div style="background-color: #ff0000">red</div></div></body></html>#container { height : 300px; width : 80%; background-color: azure; margin : 10px auto ; border : 2px solid black; display : flex; flex-direction: row; flex-wrap: wrap;}h1 { text-align: center;}#container div { height : 90px; width : 300px; color : white; text-align : center; font-size: 1.5em;}So since my initial item height was 100px , I did not see anything wrong in the cross axis . But then I tried to reduce the height of the item from 100px to 50px , I saw gaps in the cross axis(vertical direction) . I wasn't expecting this and couldn't understand what was causing this behavior. I am attaching pics for reference . First one is when height of the item is 100px first_image and second one is when the height has been reduced to 50px.second_image
