How can I make my flex columns have equal height in an absolutely positioned container?

Question

I have absolutely positioned div.container. div.wrapper inside it. and two divs as flex columns in div.wrapper. These columns have backgrounds.

How can I make these backgrounds go to the end of the longest column (i.e. make them the same height) and not only to the visible height of the container? I can't remove position: absolute from div.container.

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.div1 {
    background-color: yellow;
}
.div2 {
    flex: 1;
    background-color: green;
}

<div class="container">
    <div class="wrapper">
        <div class="div1">
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
        </div>
        <div class="div2">
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
        </div>
    </div>
</div>

CodePen link

Answer 1

Remove the flex properties on the container.

I also removed align-items: stretch; width: 100%; from the .wrapper as it is their default value's and doesn't need to be set.

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /*  commented out these 2 lines
    display: flex;
    flex-direction: column;
  */
  overflow: auto;
}

.wrapper {
  min-height: 100%;
  display: flex;
  /*  commented out these 2 lines as they are not needed
    align-items: stretch;
    width: 100%;
  */
}

.div1 {
  background-color: yellow;
}

.div2 {
  flex: 1;
  background-color: green;
}

p {
  padding: 20px 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="div1">
      <p>Some long content here</p>
      <p>Some long content here</p>
      <p>Some long content here</p>
    </div>
    <div class="div2">
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
    </div>
  </div>
</div>