Have full height background color on scrollable content

Question

I'm trying have a container on the left that take full height in all cases, even window height is small and there is a scroll. Also have a background image on the right hand side that scales proportionally.

The issue I'm having is when there is not enough height left container does only gets background color as the viewport height not the outer window height. Is there a way to keep background color intact both in scrollable and non-scrollable conditions?

Demo:

https://jsfiddle.net/x1o5n2bL/1/

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  /* height: 100%; */
  background: url(https://picsum.photos/id/965/4300/2820) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.https://picsum.photos/id/965/4300/2820', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://picsum.photos/id/965/4300/2820', sizingMethod='scale')";
}

.left {
  width: 50%;
  float: left;
  background-color: black;
  color: white;
}

/* enabling this breaks the background-color when there is a scroll */
html,
body,
.left {
  height: 100%;
}

<div class="left">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos cumque quae, corporis temporibus odio ab, aliquid omnis, a ullam quos voluptatem cum recusandae culpa earum tempore quisquam dignissimos accusantium?</p>
  <p>Nihil maxime ad nulla, repudiandae sequi tenetur. Amet ut quo consequatur molestiae veritatis neque quam ex libero, minus exercitationem, obcaecati dolorum aliquam corrupti laudantium alias velit corporis architecto in pariatur.</p>
  <p>Fugit nulla, dolores eius sint quibusdam autem perferendis inventore veniam distinctio porro, maiores facilis quos enim saepe tenetur aliquam quod deserunt rem laborum amet illo repellat ea. Sint, eius, distinctio?</p>
  <p>Architecto nisi autem atque iusto excepturi consequuntur, porro blanditiis, debitis harum et labore libero ipsam sequi temporibus accusamus ratione, tempore sed eveniet modi. Ipsam, illo, corporis. Error in non, beatae?</p>
  <p>Doloribus aspernatur doloremque qui blanditiis nisi, explicabo alias possimus quo adipisci pariatur, excepturi quisquam ab! Necessitatibus temporibus eos, omnis recusandae nihil beatae facere tenetur ipsa ex iure, sit doloremque, labore.</p>
  <p>Ad sunt voluptates quos. Quibusdam animi mollitia itaque dignissimos impedit ducimus tempora hic voluptatibus quam provident! Alias quam, pariatur aut error magnam, earum magni repellat reiciendis, aliquid, maiores repellendus accusamus.</p>
</div>

Answer 1

Use min-height: 100% on the left div.

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