I'm having trouble understanding why a flex div always occupies 100% width of its parent element. Consider the code snippet below:
#wrapper {
width: 100%;
height: 100px;
background: green;
}
#flex {
color: white;
display: flex;
flex-direction: row;
background: blue;
}<div id="wrapper">
<div id="flex">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>Can someone explain why the flex div is automatically expanding to 100% width of the parent container? Is there a way to limit its width to just fit the content inside?
Any assistance would be greatly appreciated, Thank you!