具有弹性盒高度的引导程序答案

【问题标题】：bootstrap with flexbox heights具有弹性盒高度的引导程序
【发布时间】：2016-01-07 01:09:55
【问题描述】：

我一直在尝试获得一个布局，其中有 6 列，右侧有 6 列，其中有两个垂直框。我可以做到这一点，但我很难获得高度使用 flexbox 将两个封闭的 div 垂直拉伸。

我正在使用此示例 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>

【问题讨论】：

我已经完成了你的演示。抱歉，我没有遇到问题。
嗨，没问题 - 现在没问题 - 我会在上面发布有人帮助的代码。谢谢
好的。您应该发布完整的答案，以便未来的访问者可以从这篇文章中受益。否则，只需删除问题。
嗨，我花了一些时间才把它贴上去，但它现在应该在顶部了，谢谢。

标签： css twitter-bootstrap flexbox

【解决方案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>

【讨论】：