3

Concider the following HTML/CSS from this Fiddle

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  font-size: 5rem;
}

.fill-rest {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  background-color: green;
}

.fill-rest div {
  background-color: red;
}
<main>
  <div>Some Text!</div>
  <div>Some Text!</div>
  <div class="fill-rest">
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
  </div>
</main>

Why - if the divs with "Overflowing" are not present, the height of the element is exactly how I'd want, but as soon as you add too much elements the .fill-rest height becomes 100% of the parent instead of "the remaining space"?

I trying to find a way to make the .fill-rest not overflow main and start wrapping when the remaining space is occupied.

Roboroads
  • 1,602
  • 1
  • 13
  • 24

2 Answers2

0

Change your .fill-rest class like this:

.fill-rest {
  display: flex;
  flex-wrap: wrap !important;
  background-color: green;
}

Working example (Try to resize the window to see the wrap of the divs).

NeNaD
  • 18,172
  • 8
  • 47
  • 89
  • This makes the `.fill-rest` class never wrap, since it just grabs all the height it wants. I need `main` to be not overflown, so when `.fill-rest` is full it should start wrapping in the width. – Roboroads Dec 13 '21 at 20:09
  • I updated my answer. Can you try it again? – NeNaD Dec 13 '21 at 20:13
  • I would like to keep the flex behaviour `flex-direction: column;` - in which case this does not solve my problem. – Roboroads Dec 13 '21 at 20:21
  • If you add `flex-direction: column;` that will put each item of the `.fill-rest` in the new row. – NeNaD Dec 13 '21 at 20:33
0

After some other search terms, I found out the following from this question:

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot be smaller than the size of its content.

Adding min-height: 0; sovled my problem:

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  font-size: 5rem;
}

.fill-rest {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  background-color: green;
  min-height: 0;
}

.fill-rest div {
  background-color: red;
}
<main>
  <div>Some Text!</div>
  <div>Some Text!</div>
  <div class="fill-rest">
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
  </div>
</main>
Roboroads
  • 1,602
  • 1
  • 13
  • 24