Item with css `flex-basis: 0px; flex-grow: 1;` is staying at 0px and not growing

Question

I have an item which I would like to be able to maximize. The way I'm trying to do this is by transitioning flex-grow. My specific use case aside, I have some code that isn't working the way I would expect:

div {
  display: flex;
  flex-direction: column;
  border: 1px solid #A8F;
}

span {
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #8AF;
}

span.selected {
  flex-basis: 0px;
  flex-grow: 1;
  border: 1px solid #FA8;
}

<div>
  <span>Item 1</span>
  <span class="selected">Item 2</span>
</div>

If you run the code above, you'll see nothing, and that is the problem. The item with the class selected seemingly should be using flex-grow: 1 to gobble up all the space it needs, but it is staying at 0px.

Why is this css resulting in something of 0px height?

EDIT: for anyone trying to do the same thing as I, my solution ended up being using some js to sum the height of all the spans, and setting the div height to that on open, and to the height of the selected item on close. By manipulating flex-grow/shrink you can animate it pretty nicely.

Answer 1

With flex-direction: column; and the other flex settings but no container height, the browser doesn't know how tall to make it. This isn't an issue with flex-direction:row; because the height isn't being modified.

You can add a height or min-height so the selected item knows how tall to grow.

div {
  display: flex;
  flex-direction: column;
  border: 1px solid #A8F;
  min-height: 100px;
}

span {
  flex-basis: 0px;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #8AF;
}

span.selected {
  flex-basis: 0px;
  flex-grow: 1;
  border: 1px solid #FA8;
}

<div>
  <span>Item 1</span>
  <span class="selected">Item 2</span>
</div>