greenRed greenRed - 27 days ago 7
HTML Question

Equal flex columns height in absolutely positioned container

Codepen here: https://codepen.io/anon/pen/MvqWwg

I have absolutely positioned

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

How to 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
.

This is the HTML code:

<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>


This is the CSS:

.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;
}

Answer Source

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>