自举与flexbox高地

我一直在试图得到一个布局，我有一列6，再加上一列6右边有两个垂直框。我可以实现这个没问题，但我努力工作使用flexbox让两个封闭的div的高度垂直拉伸。自举与flexbox高地

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

（我一直在尝试各种柔性成长&柔性山坳上的第二列 - 但没有什么似乎已经解决了这个问题至今）

<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>

来源

2016-01-06 mro

我已经通过演示。对不起，我没有解决问题。 –

嗨，没问题 - 现在好了 - 我会发布一些人帮助的代码。谢谢 – mro

好的。你应该发布一个完整的答案，以便将来的访问者可以从这篇文章中受益。否则，只需删除该问题。 –

这里的问题解决

<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>

来源

2016-01-06 17:09:55 mro

自举与flexbox高地

回答

相关问题