Как прокрутить вертикально в сторону div, если выше основного блока в ответном макете?

Question

У меня есть два divs, в одном ряду, бок о бок. Второй - главный, более важный. Я хочу, чтобы строка не была выше главной. Поэтому, когда содержимое первого 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; 
}