<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-4">
      <div class="all-height">
        <div class="all-height__itme-one">
          <p>This unit with fixed height</p>
        </div>
        <div class="all-height__itme-three">
          <p>Floating altitude</p>
          <div class="wrapper">
            <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>
    <div class="col-8">
      <div class="all-height">
        <div class="all-height__itme-two">
          <p>This unit with fixed height</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?
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.all-height {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  height: 100%;
}

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

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

.all-height__itme-three {
  position: relative;
  flex: 1 1 auto;
  background: #68d8d6;
  margin-bottom: 0;
  padding: 10px;
  overflow-y: auto;
}

.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;
}

.wrapper {
  position: absolute;
  left: 10px;
  right: 10px;
}