137

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:

Flexbox problem

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.

indextwo
  • 5,535
  • 5
  • 48
  • 63
  • ... not an answer, but why do you want to change flex, you have a working code already which is prefix free, and will work on more browsers? – Stickers Jun 06 '15 at 15:53
  • 1
    @sdcr: Because of the other requirements of the project which, at ~20,000 lines of code, would probably take a little while to go into. – indextwo Jun 06 '15 at 16:02
  • 1
    oh, ok just to say that some of the flex properties you set there aren't even necessary, such as `flex-direction: row;`, `justify-content: flex-start;`, `align-items: flex-start;` those are default rules, unless you're overwriting them. there is a great guide [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). – Stickers Jun 06 '15 at 16:10
  • @sdcr: Thanks - it is indeed very verbose in that example, but only because I copy-n-pasted it directly from my stylesheet, in which there are a lot of conditions and subclasses, etc. which is why the properties are set explicitly. I don't know flexbox well enough to write it off the top of my head yet! – indextwo Jun 06 '15 at 16:12
  • makes senses then, be aware, browser support for flex is IE10+ with the -ms* prefix. – Stickers Jun 06 '15 at 16:15
  • 1
    Great question! Been wondering about this forever myself. Never knew how the `flex-shrink` property worked. – HartleySan Feb 16 '20 at 19:55

5 Answers5

121

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;
}


* {
  box-sizing: border-box;
}
.wrapper {
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;
}
.boxcontainer {
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;
}
.boxcontainer .box {
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;
}
.boxcontainer .box:first-child {
  background-color: #F47983;
}
.boxcontainer .box:nth-child(2) {
  background-color: #FABCC1;
}
#slidetrigger:checked ~ .wrapper .boxcontainer {
  left: -100%;
}
#overflowtrigger:checked ~ .wrapper {
  overflow: hidden;
}
<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
85

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.

Nick Salloum
  • 2,158
  • 12
  • 13
50

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;
}
Xpleria
  • 5,472
  • 5
  • 52
  • 66
3

Set the flex-direction: column

You're trying to stack the items in a column rather than a row.

{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
Aditya Mittal
  • 1,681
  • 16
  • 12
0

addition thing - size of flex wrapper (need for background width/height and context size of block), for this we can use display:inline-flex;

user3007439
  • 41
  • 3