maam27 maam27 - 2 months ago 6
CSS Question

Column A equal to Column B

I'm trying to get 2 columns on a web page to be the same height. The height of the column's not set in advanced. What I want to accomplish is that Column A is always equal to column B. In case column A has more content it has to get a scroll bar.

I do have the 2 columns in a parent container but either column A is smaller or column A stretches the parent container. The height for column A is decided by column B. The project does use bootstrap.

<div class="parent col-md-12">
<div class="colA col-md-3"></div>
<div class="colB col-md-9"></div>
</div>


Desired outcome


  • if column A is 50 px and B 100px make a 100px

  • If column A is 100 px and B 100 px make a 100 px (no change needed)

  • If column a is 150 px and b 100 px make a 100 px



I appreciate the help.

Answer

With a minor change in the HTML this is possible with Flexbox.

Columnb will take the height of ColumnB but the content of ColumnA in inside an absolutely positioned div with 100% height (and overflow).

.parent {
  display: flex;
  margin-bottom: 1em;
}
.colA {
  position: relative;
  background: pink;
  flex: 1;
}
.colB {
  height: 75px;
  flex: 1;
  background: lightblue;
}
.inner {
  position: absolute;
  height: 100%;
  overflow: auto;
}
.tall .colB {
  height: 180px;
}
<div class="parent">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

<div class="parent tall">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

Comments