How to Set the Height of an Outer Div to Always Be Equal to a Particular Inner Div

<div class="parent-container">
   <div id="left">
      left
   </div>

   <div id="content">
      <!-- for example, fill it with a list -->
      <!-- this data can be anything though -->
      <ul></ul>
   </div>

   <div id="right">
      right
   </div>
</div>

<style>
   .parent-container {
      background-color: rebeccapurple;
      display: grid;

      /* adjust these columns to change widths */
      grid-template-columns: 10rem auto 10rem;
   }

   /* just to make things look a bit nicer */
   #left, #right {
      padding: 1rem;
      background-color: paleturquoise;
   }
</style>


<!-- script to simulate dynamic data -->
<script>
   setInterval(() => {
      const parent = document.querySelector('ul');
      const entry = document.createElement('li');
      entry.innerText = 'data';
      parent.appendChild(entry);
   }, 1000);
</script>

How to make inner divs of two unrelated outer divs equal in height?

With jQuery: https://codepen.io/anon/pen/gGVGwj

// Create two arrays for the left element heights and the right element heights
var leftArray = [];
var rightArray = [];

// Get the height of each .line element and save it to the appropriate array
$('#left .line').each(function(i) {
  leftArray.push($(this).height());
});
$('#right .line').each(function(i) {
  rightArray.push($(this).height());
});

// For each element on the left, if its height is smaller than the
// corresponding element on the right, set its height via css to 
// equal the right-side element, and vice versa. Nothing to do if 
// the heights are equal.
for (var i = 0; i < leftArray.length; i++) {
  if (leftArray[i] < rightArray[i]) {
    $('#left .line').eq(i).css('height', rightArray[i])
  } else if (leftArray[i] > rightArray[i]) {
    $('#right .line').eq(i).css('height', leftArray[i])
  }
}

I think this will be fairly fast, at least faster than setting a height on every single element. There's absolutely some work to do for responsive or mobile environments, so this isn't an ideal scenario by any means, but hopefully this does what you want.

Html element controlling height of its parent or sibling

There is no way to affect a parent in css (there is a sibling selector, although I don't see how would it be useful in this case), but this would be a way to do what you want, letting the .right div to determine the height of the container and the .left one adapting to it:

body {
  margin: 0;
  overflow: hidden;
}
.container {
  position: relative;
}
.container > * {
  padding: .2rem;
}
.container p {
  margin: 0;
}
.left {
  background-color: cornflowerblue;
  position: absolute;
  overflow-y: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 50%;
}
.right {
  position: relative;
  background-color: aquamarine;
  left: 50%;
}

<div class="container">
  <div class="left">
    Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci. Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci. Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci. Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci.
  </div>
  <div class="right">
    <p>The text that<br>does not change<br>and must always<br>be displayed<br>in its entirety<br>without scrollbar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nibh ex, sit amet vulputate ipsum luctus non.</p>
  </div>
</div>