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•2y ago
Message Not Public
Sign In & Join Server To View
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.
working now
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.