Restrict height of container inside flex to not grow more then available space on page with css

Question

EDIT: My example was to complicated. So I made a simpler one.

.top grows beyond the available size of the html element. I don't want any content outside the current viewport which is 100vh, but I don't know the height of .bottom which can vary.

This line: max-height: calc(100vh - 60px); Makes it look like this works. But it does not, because I don't know the height of .bottom, which I just estimated to 60px;

<div class="page">
  <div class="top">
    <div class="left">Some text</div>
    <div class="right">
      <img src="http://placehold.it/350x1800">
    </div>
  </div>
  <div class="bottom">
    <button>Click</button>
    <button>Click</button>
    <button>Could be several lines</button>
  </div>
</div>

html, body {
  max-height: 100vh;
}

Css

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  max-height: calc(100vh - 60px); 
  /* 
  I don't know the height of .bottom 
  It can change when browser is resized too..
  How do I solve this.
  */
}
.left {
  flex: 1 1 auto;
}
.bottom {
  padding: 10px;
  flex: 1 1 auto;
  background-color: teal;
}

EDIT2: (included the original links from the first version) http://codepen.io/knobo/pen/epboBv (css version. Does not work) http://codepen.io/knobo/pen/wKRNjr/ (js version. Works. But I want to know how to do it with css.)

EDIT3 Screenshots:

When browser window is small, the bottom row disappears, when div.right is too big.

When browser window is large everything shows up (corectly)

This is how it should be: div.top is scaled down, and bottom row is stil visible. I was able to do it with javascript. I guess it should be possible with css too.

The javscript version does what I want. But the css version does not. — knobo, Nov 14 '15 at 22:15
Now clicking the buttons does nothing, but the layout still works. — Oriol, Nov 14 '15 at 22:21
The problem is that I don't know the size of .bottom, which I just estimated to 60px here. — knobo, Nov 14 '15 at 22:23
Maybe an answer here will help you: http://stackoverflow.com/q/33129660/3597276 — Michael Benjamin, Nov 15 '15 at 03:18

score 1 · Accepted Answer · answered Nov 15 '15 at 10:29

The solution is surprisingly easy.

.right {
   position: relative;
   /* width: Do something with width here. */ 
}

.nooverflow {
   position: absolute;
}

then wrap the content of .right with class="nooverflow"

<div class="right">
  <div class="overflow">
     {{ Content of .right }}
  </div>
</div>

Restrict height of container inside flex to not grow more then available space on page with css

1 Answers1