KPC
Kevin Powell - Community•14mo ago
Avinash

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
Unknown User•14mo ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash•14mo 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 Powell•14mo 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
More Posts
Done with HTML/CSS, how to approach this in JS.So i created a json file as database which is then stored in localStorage. since my knowledge in jFor media query min-width or max-width is better to choose? And is consistency important?Can I use like %30 times min-width and %70 times max-width in my stylesheet in media queries?Why i cant install gatsby-remark-reading-time?i've been trying for so long and still cant install this pluginSCSS errorDoes anyone know why do I get this error? https://codepen.io/myntsu/pen/BaqdKOwasync javascriptcould someone help me understand anything and everything about asynchronous jsGet innerHtml with forEach loopI want to get the innerHTML of h1 element here, what am I doing wrong hereHow to make this first grid item have flex-start and the second one flex-end with grid-template-col?is it possible to decide the grid-item placement from here while doing grid-template-columns? displAnyone here use 12 column grids?I'm learning a lot about 12 column grids and they seem great for design, but I'm not sure how practiWhiteout background on hover over buttons/menu components in Chakra UIWhile using either buttons or menus(even with many other components) when I hover the mouse over theOverflow-x: hidden causes vertical scrollingHey! I'm working on a website, and I have two problems I'm trying to figure out: 1- I have a her