The child div width is not covering the whole width of parent.
According to me since there is no constraints of width the default behaviour of flex-item is to be the size of the content inside of it.
But since the content inside of it width is dependent on the parent itself, its causing a problem.
Code Link: https://onecompiler.com/html/42ruxwq27
I tried adding width as 100%, which resulted in the output that i desired, but most importantly
What i want, is to know about this behaviour more -> "when the child is dependent of the parents width and the parent is dependent on the childs width."Ex:
.child { width: 50%;//this tells it will be 50% of parents width}.parent { display: flex; //this would make the div be as same width as the content inside of it}.parent { display: flex; width: 50%; background-color: blue;}.child { display: flex; flex-wrap: wrap; align-items: flex-start; aspect-ratio: 1; background-color: green;}.item { width: calc(100% / 7); aspect-ratio: 1; padding: 1%; background-color: red; box-sizing: border-box;}<div class="parent"><div class="child"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></div>