html - parent 高度自动的 child 的动态高度

Question

我不知道我的标题或副标题要多长时间。所以需要继承parent的child的height。没有指定父级高度的任何其他方式？或者任何人都可以在这里指出我的正确答案，我找不到针对我的问题的答案。

.header {
  //height: 45px;
}
.header .col-xs-3 {
  border-right: 3px solid #efefef;
  height: inherit;
  padding-left: 10px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-12 header">
    <div class="col-xs-3">
      <label>Title 1</label>
    </div>
    <div class="col-xs-3">
      <label>Title 2</label>
    </div>
    <div class="col-xs-3">
      <label>Title 3<br/>Sub-Title</label>
    </div>
    <div class="col-xs-3">
      <label>Title 4</label>
    </div>
  </div>
</div>

Answer 1

您可以使用 CSS flexbox 实现同样的效果。

CSS:

.header {
  display: flex;
  flex-direction: row;
  //height: 45px;
}
.header .col-xs-3 {
  border-right: 3px solid #efefef;
  height: auto;
}

fiddle :https://jsfiddle.net/debraj/fk6fs5ht/