0

Without using column direction I'm trying to get flex items to fill the remaining vertical space. It doesn't seem to be possible without columns?

Codepen

<div class="flex-container">
  <div class="flex-item" style="height:100px">100PX</div>
  <div class="flex-item stretch-v">
    Should stretch vertically
  </div>
</div>

CSS

.flex-container {
    display: flex;
    flex-flow: row wrap;
    flex:1; // stretch to height of container
    align-content: flex-start;
}

.flex-item {
    display:flex;
    align-self: stretch; // has no effect
    flex: 100%;
}

.stretch-v {
    align-self: stretch;
}

I understand that by default align-content: stretch will stretch children vertically. However, it does so evenly. Therefore with one element fixed height the second is only proportionally stretched leaving a gap.

Can this be accomplished with rows?

UPDATE:

It seems that this is impossible as

align-content: stretch distributes free space equally across lines

which is why this seems impossible with fixed elements involved or even selecting a single item to fill remaining v-space. This seems like a strange way to spec the feature because it would mean that if you want control of vertical sizing you must change the child's parent's axis to column.

Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
  • 1
    I don't think so ... it's a clear use cas for columns direction – Temani Afif Jan 11 '19 at 00:38
  • Thanks Temani, so you are saying that if you want control of vertical space, row items cannot do that on their own (without specified height) (I have never read this anywhere) – Ben Racicot Jan 11 '19 at 00:40
  • I guess so, I know only the stretch effect of alignment that can affect the height when in a row direction. It's not working in this case because the line box are fitting their content due to flex-start set to align-content (you can check this:https://stackoverflow.com/q/53119276/8620333 for more details) – Temani Afif Jan 11 '19 at 00:44
  • Yes! `"align-content: stretch distributes free space equally across lines"` which is why this seems impossible with any fixed elements. – Ben Racicot Jan 11 '19 at 00:47
  • No, you can't do that with `row` direction. The dupe link explains why. There is a workaround, using absolute position, which is the best cross browser version if to force that behavior ... like this: https://codepen.io/anon/pen/GPbpyN?editors=1100 ... and the posted answers solution is not good, as using percent on a child's height, where its parent doesn't have a explicit set height, will give you cross browser issues. – Asons Jan 18 '19 at 06:18
  • Here is another answer of mine, showing a similar suggestion (it uses `column` direction though but suffer from a similar issue, where height is not set): https://stackoverflow.com/questions/46997189/why-height-100-doesnt-work/46997591#46997591 – Asons Jan 18 '19 at 06:30

1 Answers1

1

.stretch-v { background: #ffc0b5; height: calc(100% - 100px); }

Varun
  • 46
  • 1
  • This is what I was avoiding but thank you for confirming it as 'not crazy'. – Ben Racicot Jan 11 '19 at 11:26
  • @TR3B Using percent on a child's height, where its parent doesn't have a explicit set height, will give you cross browser issues. If to force the wanted behavior using `row`/`wrap` direction/flow, the best cross browser solution is to use an absolute positioned wrapper for the _item that should stretch_. – Asons Jan 18 '19 at 06:05
  • 1
    @TR3B Here's a sample of the above suggestion: https://codepen.io/anon/pen/GPbpyN?editors=1100 ... and FYI, your `min-height: 100%;` will cause more issues on e.g. IE11, as it has a _min-height_ bug. Furthermore, your comment saying _`align-self: stretch; //default` is the default_ is wrong. `align-self` defaults to `auto` and will with that pick up its parents default (if not set), which has `stretch` as default. – Asons Jan 18 '19 at 06:14