Kevin Powell - Community•2y ago

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

Avinash-Tallapaneni

CodePen

baskteball

...

3 Replies

Unknown User•2y ago

Message Not Public

AvinashOP•2y 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•2y 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.

Gaming

Programming

Issue with flexbox