I am experiencing an issue with a parent having a flex child:
.box {
background-color: white;
max-width: 80vw;
height: auto;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 10;
overflow: hidden;
border-radius: 32.5vw;
z-index: 100001;
}
.items {
width: auto;
height: auto;
margin: auto;
display: inline-flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
justify-content: center;
background-color: red;
}<div class="box">
<div class="items">
<div class="menuItems">
......
</div>
</div>
</div>The issue is that the flex property is set to inline-flex, causing it to take the size of its items. However, the parent container box insists on having its own width (either maximum or 100%).
How can I make the box match the exact width of the flex element items?