Как правильно добавить прокрутку?
сейчас если делать ресайз, то меньше 560 - авто не будет. нужно обновлять страницу
или можно сделать как-то через стили?
$(document).ready(function() {
function blockHeight() {
let heightAside = 0;
if ($(document).width() > 560){
console.log($(document).width())
heightAside = $('.buy__item--aside').height();
} else {
heightAside = "auto";
}
$('.buy__item--text').css("max-height", heightAside);
}
blockHeight();
$(window).on('resize', function () {
blockHeight();
});
})
.buy__wrap {
display: flex;
}
.buy__item--aside {
width: 320px;
align-self: flex-start;
}
.buy__item--text {
width: calc(100% - 320px);
overflow-y: auto;
outline: 1px solid red;
}
.buy__box:not(:last-child) {
margin-bottom: 12px;
}
* {
box-sizing: border-box;
}
*::after,
*::before {
box-sizing: border-box;
}
.container {
max-width: 988px;
padding: 0 24;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="buy__wrap">
<div class="buy__item buy__item--aside">
<ul class="buy__list">
<li class="buy__box buy__box--active"><a href="">title 1</a></li>
<li class="buy__box buy__box--active"><a href="">title 2</a></li>
<li class="buy__box buy__box--active"><a href="">title 3</a></li>
<li class="buy__box buy__box--active"><a href="">title 4</a></li>
<li class="buy__box buy__box--active"><a href="">title 5</a></li>
<li class="buy__box buy__box--active"><a href="">title 6</a></li>
<li class="buy__box buy__box--active"><a href="">title 7</a></li>
</ul>
</div>
<div class="buy__item buy__item--text">
<div class="buy__content">
<div class="buy__elem">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum suscipit temporibus molestiae maiores, similique soluta vel ut nemo deleniti! Aut dolor porro amet tenetur, numquam at, voluptatum error explicabo veritatis?</p>
</div>
<div class="buy__elem">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum suscipit temporibus molestiae maiores, similique soluta vel ut nemo deleniti! Aut dolor porro amet tenetur, numquam at, voluptatum error explicabo veritatis?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum suscipit temporibus molestiae maiores, similique soluta vel ut nemo deleniti! Aut dolor porro amet tenetur, numquam at, voluptatum error explicabo veritatis?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum suscipit temporibus molestiae maiores, similique soluta vel ut nemo deleniti! Aut dolor porro amet tenetur, numquam at, voluptatum error explicabo veritatis?</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>