Issue with flexbox

parent div has two child div, one of the div has hard coded value of 17rem, for some reason flex basis(?) is being applied screenshot shows the div isbeing reduced. what could be issue? https://codepen.io/avinash-tallapaneni/pen/rNqVMKZ
3 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash2y ago
i forgot to mention that flex class has display:flex, align-items:center, justify-content:center as properties. i failed to add that in the codepen i updated the codepen changed width to min-width, its working.

.menu-container {
max-width: 17rem;
min-width: 17rem;


}

.menu-container {
max-width: 17rem;
min-width: 17rem;


}
working now
Kevin Powell
Kevin Powell2y ago
Flex items, by their nature, are flexible (as the name implies). By default, they shrink if there isn't enough space, so the easiest solution of you have a width you want to maintain is probably just flex-shrink: 0 Another option would be: flex: 0 0 17rem If you need something locked in a t a specific value, that will set the flex-grow and flex-shrink both to 0, so it won't flex or grow, and then setting the Flex-basis to the size you want. Min and max width will work, so no need to change it now, but a bit more than you need.
Want results from more Discord servers?
Add your server