如果在响应式布局中如果高于主块，则垂直滚动除了div？

Question

我有两个div，并排排列。 第二个是主要的，更重要的。 我希望行不要高于主行。 因此，当第一个div的内容太高时，溢出的内容应该隐藏或滚动。 看看下面的代码。 如何使它与CSS？

重要提示：我的布局很灵敏，所以我正在寻找一个没有固定高度的解决方案。

<style> 
 
.wrap {border: 5px solid green} 
 
.aside {display: inline-block; width: 25%; font-size: 300%; vertical-align: top; background-color: yellow; } 
 
.main {display: inline-block; width: 75%; font-size: 300%; background-color: red; padding-bottom: 56%; vertical-align: top} 
 

 
</style>

<div class="wrap"> 
 
    <div class="aside"> 
 
    I want this block to be scrolled vertically if height is greater than Main Block's height.<br> 
 
    The height of "wrap" block should be the same like Main Block's height. 
 
    <Br><br> 
 
    long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text 
 
    </div><div class="main"> Main Block </div> 
 
</div>

Answer 1

我认为你需要添加一些JavaScript的最佳结果。不过你可以试试下面的代码没有JavaScript：

<div class="wrap"> 
    <div class="aside"> 
    I want this block to be scrolled vertically if height is greater than Main Block's height.<br> 
    The height of "wrap" block should be the same like Main Block's height. 
    <Br><br> 
    long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text 
    </div><div class="main"> Main Block </div> 
</div> 

CSS

.wrap { 
    border: 5px solid green 
} 

.aside { 
    display: inline-block; 
    width: 25%; 
    font-size: 300%; 
    background-color: yellow; 
    height: 100vh; 
    float: left; 
    overflow-y: scroll; 

} 

.main { 
    display: inline-block; 
    width: 75%; 
    font-size: 300%; 
    background-color: red; 
    height: 100vh; 
}