如何使孩子的Flexbox父級高度為100％，而不給每個孩子增加100％的身高

Question

我的網站上有一排帶有嵌套列的行，該行具有引導程序.column類具有背景。 我希望背景色在不更改HTML的情況下能填滿整個高度。

如果我增加height: 100%; 到嵌套行，bootstrap col和它們的列類，我得到了想要的結果，但是有可能寫得更容易嗎？

這是我的代碼

https://codepen.io/Insane415/pen/rZWYOE

<div class="container">
   <div class="row sub-heading">
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="column">
            Lorem Ipsum Lorem Ipsum <br>Break
         </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6">
         <div class="row sub-heading full-height">
            <div class="col-xs-4 full-height">
               <div class="column full-height"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
            <div class="col-xs-4">
               <div class="column"></div>
            </div>
         </div>
      </div>
   </div>
</div>

.sub-heading {
  display: flex;
}

.column {
  background: #fce6cc;
  position: relative;
  margin: 0 -13px;
  min-height: 30px;
  padding: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.full-height {
  height: 100%;
}

Answer 1

無需更改HTML：

 .sub-heading { height: 100%; } .sub-heading > div { background: pink; } .column { position: relative; margin: 0 -13px; min-height: 30px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .sub-heading { display: flex; } .sub-heading > div { border-left: 5px solid #fff; border-right: 15px solid #fff; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row sub-heading"> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="column"> Lorem Ipsum Lorem Ipsum <br>Break </div> </div> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="row sub-heading full-height"> <div class="col-xs-4 full-height"> <div class="column full-height"></div> </div> <div class="col-xs-4"> <div class="column"></div> </div> <div class="col-xs-4"> <div class="column"></div> </div> </div> </div> </div> </div> 

Answer 2

根據我的理解，我分享了摘錄，希望對您有所幫助

  .sub-heading { display: flex; position: relative; min-height: 100%; border: 1px solid #eee; } .column { background: #fce6cc; position: relative; border:1px solid #333; margin: 0 -13px; min-height: 30px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .sub-heading .column{ min-height: 100%; } 

 <div class="container"> <div class="row sub-heading"> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="column"> Lorem Ipsum Lorem Ipsum <br>Break </div> </div> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="row sub-heading"> <div class="col-xs-4"> <div class="column"></div> </div> <div class="col-xs-4"> <div class="column"></div> </div> <div class="col-xs-4"> <div class="column"> </div> </div> </div> </div> </div> </div>