Flexbox how to get divs to fill up 100 of the container width without wrapping

Question

I m in the process of updating an old inline-block-based grid model I have to a newer Flexbox one I created  Everything has worked fine  apart from one little snag  which has become a bit of a dealbreaker   I have a bunch of CSS-controlled sliders  so there s a containing wrapper with 100  width  and inside is another div  its width is also 100   but its white-space is set to nowrap  Using inline-block  this meant that the internal divs  which were also set to 100  width  wouldn t be bound by their parents  constraints and wrap onto the next line - they d just carry on flowing out of the box  This is exactly what I wanted  However  I cannot get this to work at all with flexbox  For reference  here s an image     And for reference  here s a jsFiddle of the thing working with inline-block  http   jsfiddle net 5zzvqx4b      and not working with Flexbox  http   jsfiddle net 5zzvqx4b 1   I ve tried all kinds of variations with flex  flex-basis  flex-wrap  flex-grow  etc  but for the life of me I can t get this to work    Note that I can force it to do what I want in a hacky  inflexible way by setting the  boxcontainer width to 200   That works for this single example  but in some cases I won t know beforehand how many child boxes there will be  and I d rather not resort to inline styling on each element if possible

User · Answer

You can use the shorthand flex property and set it to

flex: 0 0 100%;

That's flex-grow, flex-shrink, and flex-basis in one line. Flex shrink was described above, flex grow is the opposite, and flex basis is the size of the container.

User · Answer

To prevent the flex items from shrinking  set the flex shrink factor to 0      The flex shrink factor determines how much the flex item will   shrink relative to the rest of the flex items in the flex   container when negative free space is distributed  When omitted  it is   set to 1     boxcontainer  box     flex-shrink  0       x000D   x000D      x000D    box-sizing  border-box  x000D    x000D   wrapper   x000D    width  200px  x000D    background-color   EEEEEE  x000D    border  2px solid  DDDDDD  x000D    padding  1rem  x000D    x000D   boxcontainer   x000D    position  relative  x000D    left  0  x000D    border  2px solid  BDC3C7  x000D    transition  all 0 4s ease  x000D    display  flex  x000D    x000D   boxcontainer  box   x000D    width  100   x000D    padding  1rem  x000D    flex-shrink  0  x000D    x000D   boxcontainer  box first-child   x000D    background-color   F47983  x000D    x000D   boxcontainer  box nth-child 2    x000D    background-color   FABCC1  x000D    x000D   slidetrigger checked    wrapper  boxcontainer   x000D    left  -100   x000D    x000D   overflowtrigger checked    wrapper   x000D    overflow  hidden  x000D    x000D   lt input type  checkbox  id  overflowtrigger    gt  x000D   lt label for  overflowtrigger  gt Hide overflow lt  label gt  lt br   gt  x000D   lt input type  checkbox  id  slidetrigger    gt  x000D   lt label for  slidetrigger  gt Slide  lt  label gt  x000D   lt div class  wrapper  gt  x000D     lt div class  boxcontainer  gt  x000D       lt div class  box  gt  x000D        First bunch of content  x000D       lt  div gt  x000D       lt div class  box  gt  x000D        Second load  of content  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In my case  just using flex-shrink  0 didn t work  But adding flex-grow  1 to it worked    item       flex-shrink  0      flex-grow  1

[css] Flexbox: how to get divs to fill up 100% of the container width without wrapping?

Examples related to css

Examples related to flexbox