自动固定剩余的高度

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