One Flex/Grid Item Sets the Size Limit For Siblings

document.addEventListener('DOMContentLoaded', boxResize);
window.addEventListener('resize', boxResize);

function boxResize() {
  let divA = document.querySelector("#map").offsetHeight,
      divB = document.querySelector("#results");
  divB.style.height = divA + "px";
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background-color: red;
  height: 50px;
  flex: 0 0 auto;
}

footer {
  width: 100%;
  background-color: purple;
  height: 100px;
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1;
}

#map {
  order: 2;
  flex-grow: 1;
  z-index: 5;
  min-height: 400px;
  position: relative;
  height: 100%;
  background-color: green;
}

#results {
  height: 0;
  order: 1;
  min-width: 200px;
  max-width: 375px;
  padding: 0;
  z-index: 10;
  display: flex;
}

.result-items {
  overflow-y: auto;
  width: 100%;
}

.result {
  background-color: aqua;
  height: 75px;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
}

<header class="header">

</header>
<main>
  <div class="container">
    <div id="map">

    </div>
    <div id="results">
      <div class="extra-div">

      </div>
      <div class="result-items">
        <div id="item-1" class="result">
          <span>Item 1</span>
        </div>
        <div id="item-2" class="result">
          <span>Item 2</span>
        </div>
        <div id="item-3" class="result">
          <span>Item 3</span>
        </div>
        <div id="item-4" class="result">
          <span>Item 4</span>
        </div>
        <div id="item-5" class="result">
          <span>Item 5</span>
        </div>
        <div id="item-6" class="result">
          <span>Item 6</span>
        </div>
        <div id="item-7" class="result">
          <span>Item 7</span>
        </div>
        <div id="item-8" class="result">
          <span>Item 8</span>
        </div>
        <div id="item-9" class="result">
          <span>Item 9</span>
        </div>
        <div id="item-10" class="result">
          <span>Item 10</span>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="footer">

</footer>

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>

main {  display: flex;}
section {  display: flex;  flex-direction: column;  width: 7em;  border: thin solid black;  margin: 1em;}
:not(.limiter)>div {  flex-basis: 0px;  flex-grow: 1;  overflow-y: auto;}

<main>  <section>    <div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text      in flow text in flow text in flow text in flow text in flow text in flow text in</div>  </section>
  <section class="limiter">    <div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>  </section>
  <section>    <div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>  </section></main>