.container {
display: flex;
}
.component {
display: flex;
//width: 100%;
height: 10px;
background-color: red;
}
<div class="container">
<div class="component"></div>
</div>
When the width: 100% is removed, the .component collapses and disappears. When set to width: 100%, it becomes visible.
I am puzzled as to why this happens. The default setting for display: flex includes a width of 100%, so why do I have to explicitly specify width: 100%?
From what I understand, the .component is treated as a flex-item, which defaults to a width of auto. This means that the width collapses to fit its content, but since the .component has no content, it collapses to 0. However, because it has a display of flex, which normally comes with a default width of 100%, there should be no need to manually set the width to 100%.