Content height is not automatically adjusted when scrolling-CodePudding

I am trying to create a modal that has a footer and an header. The content has two columns: LeftSection and RightSection. I want to have the second column fill the height of the content depending on what the first columns height is (which can differ based on content). From the snippet, this means to have the black div go down as much as the red one does.

.Container {
  margin: auto auto;
  width: 80vw;
  height: 250px;
  background-color: #8080801a;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.Header {
  height: 50px;
  width: 100%;
  background-color: #61dafb;
}

.FlexContainer {
  flex: 1;
  display: flex;
  overflow: auto;
}

.LeftSection {
  width: 200px;
  height: 400px;
  background: red;
}

.RightSection {
  width: 100%;
  background-color: black;
}

.Footer {
  height: 50px;
  background-color: blue;
  width: 100%;
}

<div class="Container">
  <div class="Header"></div>

  <div class="FlexContainer">

    <div class="LeftSection" ></div>
    <div class='RightSection' ></div>

  </div>
  <div class='Footer' />
</div>

CodePudding user response：

Do you want this?

.Container {
  margin: auto auto;
  width: 80vw;
  height: 250px;
  background-color: #8080801a;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.Header {
  height: 50px;
  width: 100%;
  background-color: #61dafb;
}

.FlexContainer {
  flex: 1;
  display: flex;
  overflow: auto;
}

.LeftSection {
  width: 200px;
  height: 400px;
  background: red;
  position: sticky;
  top: 0;
}

.RightSection {
  width: 100%;
  background-color: black;
  position: sticky;
  top: 0;
}

.Footer {
  height: 50px;
  background-color: blue;
  width: 100%;
}

<div class="Container">
  <div class="Header"></div>

  <div class="FlexContainer">

    <div class="LeftSection" ></div>
    <div class='RightSection' ></div>

  </div>
  <div class='Footer' />
</div>