Как правильно добавить прокрутку?

сейчас если делать ресайз, то меньше 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>


Ответы (0 шт):