Stretch adjacent columns to match height of column that is overflowing in flex layout?

user_3266845 0
Viewed 25

I want to stretch adjacent columns to match the height of the column that is overflowing using flex layout (without hardcoding the value, obviously). The shorter column is stretching (default flex child behavior), but stops short at the height of the overflowing container. I found solutions using display: grid and display: table-cell but I'm wondering how I can make this work using flex in this simplified demo:

https://jsfiddle.net/gk3Ltpy5/

* {
  box-sizing: border-box;
}

#flex:checked~.outer {
  display: flex;
  align-items: stretch;
  /* the default, but placed here anyway */
}

#grid:checked~.outer {
  display: grid;
  grid-template-columns: 30px 1fr;
}

#table-cell:checked~.outer .col {
  display: table-cell;
}

.outer {
  border: 2px solid red;
  height: 300px;
  width: 200px;
  overflow: auto;
}

.col.foo {
  min-width: 30px;
  height: 900px;
  border: 2px solid blue;
  min-height: 0;
  background: rgba(0, 0, 255, 0.1);
}

.col.bar {
  width: 100%;
  border: 2px solid green;
  background: rgba(0, 255, 0, 0.1);
}
<h1>How to get the <code>.bar</code> container to match the height of the overflowed <code>.foo</code> div using <code>flex</code>?</h1>

<input type="radio" id="flex" name="solutions" checked="checked"><label for="flex">Flex solution?</label>

<input type="radio" id="grid" name="solutions"><label for="grid">Grid solution</label>

<input type="radio" id="table-cell" name="solutions"><label for="table-cell">Table-cell solution</label>

<div class="outer">
  <div class="col foo">
    foo
  </div>
  <div class="col bar">
    bar
  </div>
</div>

flexbox css
1 Answers

I don't think this can work with flexbox alone.

The problem is that align-stretch, like the other flex keyword alignment properties (e.g., justify-content, align-self, etc.) operate within the scope of free space on the flex line.

Your problem concerns the overflow area, which has nothing to do with the free space. Hence, I don't think flex properties can help you.

The Grid and Table examples work because they, unlike Flex, have actual rows, and the columns exist in these rows. So when the foo item expands the row, the bar column tracks it.

user_35972760
Related