css - 具有 flexbox 高度的 Bootstrap

Question

我一直在尝试获得一个布局，其中我有一个 6 列，加上右侧的 6 列，其中有两个垂直框。我可以实现这个没问题，但我正在努力获得高度两个封闭的 div 使用 flexbox 垂直拉伸(stretch)。

我正在使用这个例子 http://www.bootply.com/7UhIWMK808和适应。这是我一直在使用的。有什么想法吗？

(我一直在第二列尝试各种 flex-grow 和 flex-col - 但似乎还没有解决它)

<div class="container"><h3></h3></div>
<div class="container">
  <div class="row row-flex row-flex-wrap">
  <div class="col-md-6">
  <div class="flex-col">
       <div class="flex-grow" style="background: grey;">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
        Sed ut perspiciatis unde omn eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
        Sed ut perspiciatis unde omn

       </div>
   </div>
</div>

<div class="col-md-6">
    <div class="row">
      <div class="col-md-12"> 
        <div class="">
           <div class="" style="background: grey;">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem ape

           </div>
        </div>
      </div>

       <div class="col-md-12"> 
        <div class="">
           <div class="" style="background: grey;">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem ap

           </div>
        </div>
      </div>
  </div>





</div>

</div><!--/row-->
</div><!--/container-->
<hr>

Answer 1

问题解决了

<style>
  .flex-container {
display: flex;
align-items: stretch;
  }

  .flex-column {
    display: flex;
align-items: stretch;
flex-direction: column;

flex: 1;
  }

   .child {
flex: 1;
  }
 </style>

<div class="flex-container">
  <div class="flex-column">
<div class="child">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
  </div>
  <div class="flex-column">
<div class="child">
  lorem
</div>
<div class="child">
  lorem
</div>
   </div>
</div>