Как сделать плавающую высоту блоков? Чтобы они были на одном уровне

Question

Столкнулся с такой проблемой. Есть один большой блок (назовем его container), который делится на две части col-4 и col-8. В container есть блоки с фиксированной высотой (они находятся сверху) и есть блоки которые должны быть с плавающей высотой. Так же есть блок со скролом.

Как сделать, чтобы высота со скроллом была плавающей? Не могу понять что делаю не так, код ниже.

.all-height {
  min-height: 100%;
}

.all-height__itme-one {
  background: #5bc0eb;
  height: 200px;
  margin-bottom: 20px;
  padding: 10px;
}

.all-height__itme-two {
  background: #e7606b;
  min-height: 500px;
  margin-bottom: 20px;
  padding: 10px;
}

.all-height__itme-three {
  background: #68d8d6;
  height: 500px;
  margin-bottom: 20px;
  padding: 10px;
  overflow-x: scroll;
}

.all-height__itme-three-item {
  margin-bottom: 20px;
  background-color: #e7606b;
  padding: 15px;
  color: #fff;
}

.all-height__itme-four {
  background: #59a5d8;
  height: 100%;
  margin-bottom: 20px;
  padding: 10px;
}

.all-height__itme-five {
  background: #ccd42c;
  height: 100%;
  margin-bottom: 20px;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row align-items-stretch">
    <div class="col-xl-4">
      <div class="all-height">
        <div class="all-height__itme-one">
          <p>Данный блок с фиксированной высотой</p>
        </div>
        <div class="all-height__itme-three">
          <p>Плавающая высота</p>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
          <div class="all-height__itme-three-item">Lorem ipsum dolor</div>
        </div>
      </div>
    </div>
    <div class="col-xl-8">
      <div class="all-height">
        <div class="all-height__itme-two">
          <p>Данный блок с фиксированной высотой</p>
        </div>
        <div class="row align-items-stretch">
          <div class="col-lg-6">
            <div class="all-height__itme-four">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.?</p>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="all-height__itme-five">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, voluptatum hic modi unde laudantium quia officia totam maxime doloremque labore eius exercitationem harum minima deserunt aspernatur corporis enim beatae quis? Lorem ipsum
                dolor, sit amet consectetur adipisicing elit. Doloribus, voluptatum hic modi unde laudantium quia officia totam maxime doloremque labore eius exercitationem harum minima deserunt aspernatur corporis enim beatae quis? Lorem ipsum dolor,
                sit amet consectetur adipisicing elit. Doloribus, voluptatum hic modi unde laudantium quia officia totam maxime doloremque labore eius exercitationem harum minima deserunt aspernatur corporis enim beatae quis?
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

P.S Откройте на весь экран.

БЛОГ НА HUSL

Как сделать плавающую высоту блоков? Чтобы они были на одном уровне

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