創建的Flexbox的項目一排挨個兒

Question

我試圖創建一個Flexbox的佈局，做一些我以爲會輕鬆一點定義的最大高度，但我無法找到這樣做的正確方法。

我想擁有一排具有動態高度的項目，允許一個一個孩子能夠像需要一樣高度生長，但限制了其他項目的高度，以便內容被切斷。

我想用Flexbox的，所以瀏覽器與相關的問題不是一個問題，但我想，以避免在溶液中的任何使用JavaScript。

任何想法？這可能是一個微不足道的問題，但我無法找到任何關於我一直在使用的搜索字詞的內容。謝謝！

這裏是萬一CodePen demo你想修改它在你的答案中使用。

這是我自己參考Flexbox的佈局：

.row { 
    display: flex; 
} 

.info { 
    flex: 0 0 200px; 
} 

.description { 
    flex: 1 1 auto; 
} 

<div class="row"> 
    <div class="info">This should grow dynamically</div> 
    <div class="description">This should be limited in height by the .info div</div> 
</div> 

Answer 1

Flexbox，就不能做到這一點本身，但它是可能的。

您將需要一個絕對定位的第二個孩子內的內部元素。

這裏額外的內容是/可以隱藏overflow:hidden ...或通過添加overflow:auto顯示。

.wrapper { 
 
    display: flex; 
 
    width: 80%; 
 
    margin: 1em auto; 
 
    border: 2px solid red; 
 
} 
 
.child { 
 
    flex: 1; 
 
    border: 2px solid green; 
 
} 
 
.child:nth-child(2) { 
 
    position: relative; 
 
    overflow: auto; 
 
    /*overflow: hidden; */ /* removed for demo purposes */ 
 
} 
 
.inner { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis tenetur, laboriosam! Ab facilis, officia id delectus eaque expedita quia, incidunt eligendi aut, minus temporibus tenetur.</div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure 
 
     asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo. 
 
    </div> 
 
    </div> 
 
</div>