如果在響應式佈局中如果高於主塊，則垂直滾動除了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; 
}