Flex-wrap with dynamic height

Question

I'm trying to get the div elements to distribute horizontally when the height of the .container meets the bottom of the .resize wrapper.

When I drag the window to shrink the height of the .container, I want to be to also shrink the .resize wrapper when the bottom of the .container meets the bottom of the .resize wrapper so that the elements flex-wrap and distribute horizontally in proportion to the dynamic height of the .container.

body {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container {
  flex: 1;
  border: 2px solid blue;
}
.resize {
  display: flex;
  height: auto;
  flex-direction: column;
  flex-wrap: wrap;
  border: 2px solid #f00;
}

.resize > div {
  border: 2px solid #555;
  flex: 0 0 auto;
  background-color: #ccc;
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="resize">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

score 4 · Answer 1 · answered Apr 11 '19 at 02:35

I don't think flexbox can do this.

What you want is possible in row direction. (Shrink the window horizontally in this demo)

But it doesn't work in column direction. (Shrink the window vertically in this demo).

This may be another deficiency with flexbox in column wrap mode. Here are several others:

Flex-wrap with dynamic height

1 Answers1