Here is an example where .flex2 has 2 children.
- 1st child - width: 300px
- 2nd child - width: 100%
.b{
height: 50px;
}
.flex2{
margin-top: 20px;
display: flex;
.box{
background-color: blue;
width: 300px;
}
.box1{
background-color: purple;
width: 100%;
}
}<div class="flex2">
<div class="box b">
box
</div>
<div class="box1 b">
box 1
</div>
</div>Why does setting the width to 100% (2nd child) cause a slight compression of the 1st child block with a width of 300px?
I understand that percentage width depends on the parent block's width, but I'm still confused about this behavior.
Can someone explain why setting the width to 100% shifts the block only slightly?