Just dipping my toes in the waters of web development and I've come across a challenge. I'm attempting to create a flexbox container for multiple elements with a border that doesn't stretch across the entire width of the page, but instead encloses the elements no matter their 'flex-basis' value. Here's the code snippet:
body {
color: rgb(0, 0, 0);
font-size: 1.2rem;
}
.table {
display: flex;
flex-direction: row;
border: 5px solid rgb(75, 100, 182);
}
.table > * {
flex-basis: 100px;
}
.bronze {
background-color: rgb(116, 97, 44);
}
.silver {
background-color: silver;
}
.gold {
background-color: gold;
}
.platinum {
background-color: rgb(69, 179, 173);
}
.diamond {
background-color: rgb(175, 81, 175);
}<body>
<div class="table">
<div class="bronze">Bronze</div>
<div class="silver">Silver</div>
<div class="gold">Gold</div>
<div class="platinum">Platinum</div>
<div class="diamond">Diamond</div>
</div>
</body>I'm aiming to adjust the 'flex-basis' value for all items within the container while ensuring the border wraps around them without extending to cover the full page width.
If I modify display: flex; to display: inline-flex and utilize width over flex-basis, it functions as intended. However, my preference is solely on using flex-basis. I don't wish to alter the flex-direction setting. Despite attempting to switch the display to inline-flex without incorporating width, this causes the flex-basis to be completely disregarded. My knowledge is still developing, and despite experimenting with various solutions, I haven't found one that works yet. Feeling puzzled!