限制 flex 内容器的高度，使其不超过 css 页面上可用的 space

Question

编辑：我的例子太复杂了。所以我做了一个更简单的。

.top 超出了 html 元素的可用大小。我不想要当前视口之外的任何内容，即 100vh，但我不知道 .bottom 的高度可能会有所不同。

这一行：最大高度：计算（100vh - 60px）；让它看起来像这样工作。但是没有，因为我不知道.bottom的高度，我刚刚估计是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：（包括第一个版本的原始链接） http://codepen.io/knobo/pen/epboBv（css 版本。不起作用） http://codepen.io/knobo/pen/wKRNjr/（js 版本。有效。但我想知道如何使用 css。）

编辑3 截图：

当浏览器 window 较小时，底行消失，当 div.right 太大时。

当浏览器 window 很大时，一切都会显示出来（正确地）

它应该是这样的：div.top 缩小了，底行仍然可见。我能够用 javascript 做到这一点。我想 css 也应该可以。

Answer 1

解决方法非常简单。

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

.nooverflow {
   position: absolute;
}

然后用class="nooverflow"

包裹.right的内容

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

限制 flex 内容器的高度，使其不超过 css 页面上可用的 space

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

html

css

flexbox