自舉與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高地

回答

相關問題