bootstrap - child填充100％的父级，但不大

Question

html,body, .container-fluid {
  height: 100%;
  border: 1px solid orange;
}

.page-header {
  padding-bottom: 2%;
  padding-top: 2%;
}

#icons {
  border: 1px solid red;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid green;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class='container-fluid'>
  <div class='row'>
    <div id='header' class='page-header col-lg-12 col-sm-12 col-xs-12 col-md-12'>
      <div class='col-lg-2 col-md-2 col-sm-2 col-xs-3'><img id='logo' src='img/logo.png' class='img-responsive'></div>
      <div id='icons' class='col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-12 col-lg-offset-2'>icons</div>
    </div>
    <div id='navigation' class='col-lg-12 col-sm-12 col-xs-12 col-md-12' style='border:1px solid black;height:100%;'>navigation</div>
  </div>

  <div class='row row-eq-height'>
    <div id='left' class='col-lg-2 col-sm-4 col-xs-8 col-md-2' style='border:1px solid green;'>left</div>
    <div id='right' class='col-lg-10 col-sm-10 col-xs-10 col-md-10' style='border:1px solid green;'>right<br></div>
  </div>
</div>

修改

好吧，也许我不是很清楚自己真正想要的是什么，所以我再试一次用另一张照片：

我希望侧边栏和内容div在没有滚动条的情况下填充父div的其余部分，这样它就不会比实际的父div更大。如果我对孩子使用高度：100％，它会变大，因为它需要（导航+标题）+ 100％。所以我尝试了几件事。我尝试使用带有boostrap4的flexbox，它没有用，就像我想要的那样。我可以说身高：计算（100％ - x）。但问题是x不是固定值，因为它是响应的。

那么我该怎么做呢，在没有放大页面的情况下，让孩子的其余部分（100％）填充最小高度为100％？

Answer 1

只需将.row-eq-height的高度设置为自动。

我是这样的意思：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid green;
  height: auto;
}

如果您愿意，还可以提供像min-height:100px;

这样的最小高度

看看这个小提琴：https://jsfiddle.net/digitalrevenge/p7q0ohrf/

Answer 2

据我所知，你正在修理容器的高度。这导致了问题。从容器中删除高度，您的内容区域将自动增长，因为它是flex。您还可以从.row-eq-height类和导航中删除高度。休息没问题。