自動固定剩餘的高度

Question

我有一個代碼

檢查：https://jsfiddle.net/8ufj9auo/

<style> 

    .Parent { 
     overflow-y:hidden; 
     position:fixed; 
     left:100px; 
     width:25%; 
     top:100px; 
     bottom:100px; 
    } 
    .Child_2 { 
     overflow-y:scroll; 
     height:100%; 
    } 

</style> 

<div class="Parent"> 

<!-- .Child_1 Have variable height --> 
    <div class="Child_1"></div> 
<!-- .Child_2 must be fixed the remaining height --> 
    <div class="Child_2"></div> 

</div> 

但當高度child_2 = 100%，將.Child_1，.Child_2來臨的高度的量開箱

那麼你會建議我做什麼？

Answer 1

你行你的flex顯示。如果解決了您的問題，請試試fiddle。

只需添加這些CSS規則您aside：

aside{ 
    display: flex; 
    flex-direction: column; 
} 

這個規則你.Child_2：

flex: 1; 

你必須高度添加到您的.parent格，然後你可以使用height: 100%您的.Child_2。

注：

我注意到你有兩個top和bottom屬性設置爲您parrent。我不知道爲什麼會這麼想。您應該使用top和left將其固定在您的頁面上。

您可以瞭解Flex here