0

Right now I have a flex column with two items in it, and I'm trying to figure out how to get the behavior I'm looking for. In particular, I'm trying to enforce that items within have certain minimum and maximum heights.

  • The first item item1 is on top. It should grow to encompass as much vertical space as it needs, but should not shrink below 50% under any circumstance; if the contents are larger than this, it should scroll vertically.
  • The second item item2 is in the middle. It is no larger than its contents, but should not grow beyond 50% under any circumstance; if the contents are larger than this, it should scroll vertically.
  • In the scenario where item1 would stretch beyond 50%, but item2 does not, item2 should not shrink so that it is smaller than its contents. item1 should develop a vertical scrollbar instead.
  • In the scenario where both item1 and item2 are bursting at the seams with content (too much to fit in the available space), they should both take up 50% of the available space. This is to say, the growth of item2 takes precedence over the growth of item1.
  • The entire column should always stay within a fixed height.

(I promise I'm not trying to be demanding, I'm just trying to be really super specific!)

Here's the SCSS code I currently have:

.column {
  display: flex;
  flex-direction: column;

  .item1 {
    flex: 1 1 auto;
    overflow-y: scroll;
  }

  .item2 {
    flex: 0 1 auto;
    overflow-y: scroll;
  }
}

This gets me most of the way there, but in the case where both items grow out of control, item2 ends up growing to overtake item1. Also, in the case where only item1 becomes overlarge, item2 shrinks down, which I'd rather not have.

But to summarize, and really answer the most pressing part of this question, can I use maximum heights and minimum heights in combination with Flexbox, and how? Simply adding min-height and max-height appears to have no effect.

EDIT: someone asked for a working example. This should work, though it might make you go blind.

https://jsfiddle.net/TheSoundDefense/oxykdhpt/1/

EDIT 2: the code now has item1 and item2 in isolation, making item3 irrelevant, so I removed it.

TheSoundDefense
  • 6,753
  • 1
  • 30
  • 42
  • Please provide a working example – Dekel Oct 10 '16 at 19:54
  • yes..can use both – charlietfl Oct 10 '16 at 19:55
  • I can not understand the part *The first item item1 is on top. It should grow to encompass as much vertical space as it needs, but should not shrink below 50% under any circumstance; if the contents are larger than this, it should scroll vertically* – vals Oct 11 '16 at 05:29
  • @vals sorry, that is confusingly worded. The minimum size for it is 50%, but it can grow as much as it needs to so long as it does not force `item2` to shrink. Meanwhile, `item2` can grow up to 50%. If the contents of either `item1` or `item2` are larger than the space it is currently allowed, it should scroll vertically. – TheSoundDefense Oct 11 '16 at 05:33
  • Much clear now ! I will try to find a solution – vals Oct 11 '16 at 05:41

1 Answers1

2

Let's see if this what you want.

I have removed the flex basis from item2 , and adjusted somehow the styles

.column {
  display: flex;
  flex-direction: column;
  height: 500px;
}
.column .item1 {
  background-color: red;
  flex: 1 0 50%;
  overflow-y: scroll;
}
.column .item2 {
  background-color: blue;
  flex-grow: 0;
  flex-shrink: 1;
  max-height: 50%;
  overflow-y: scroll;
}
textarea {
  resize: vertical;
}
<div class="column">
  <div class="item1">
    <textarea></textarea>
  </div>
  <div class="item2">
    <textarea></textarea>
  </div>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138