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

Question

сейчас если делать ресайз, то меньше 560 - auto не будет. нужно принудительно обновлять страницу (в данном случае на фидле запускать run)

та и контент по идее будет скакать таким способом можно как-то по-другому? через стили? или только js?

$(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>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вот один из способов. Для мобильника надо будет убрать лишние стили.

ul, p { margin: 0; }
p + p { margin-top: 1em; }

.container {
  display: flex;
}

.left {
  flex: 0 0 7em;
}

.right {
  flex: 1 1 1px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-inner {
  flex: 1 1 1px;
  overflow: auto;
}

<div class="container">
  <ul class="left">
    <li><a href="">title 1</a></li>
    <li><a href="">title 2</a></li>
    <li><a href="">title 3</a></li>
    <li><a href="">title 4</a></li>
    <li><a href="">title 5</a></li>
    <li><a href="">title 6</a></li>
    <li><a href="">title 7</a></li>
  </ul>
  <div class="right">
    <div class="right-inner">
      <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>
      <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>

БЛОГ НА HUSL

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

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