CSS two columns with one column height limited to another's content

Question

I need a two-column (equal width) container where the height is determined by the first column's content. Second column height should be shrunk (if taller) or grown (if shorter).

| first column | second column |
| unknown      | ...           |
| amount       | ...           |
| of           | ...           |
| content      | ...           |

With the base layout done with either grid or flex, is the height thing doable without JS?

See this : https://codepen.io/mariemosley/pen/1d42e2788393bf7243c3e0f9ce998f4a — Kevin M. Mansour, Apr 12 '21 at 12:18
https://stackoverflow.com/questions/2114757/css-equal-height-columns - yes you can use flex or grid wihtout any js — Pete, Apr 12 '21 at 12:40

yeahlad · Answer 1 · 2021-04-12T12:33:42.150

If you make the right column position: absolute with overflow: hidden and the column background-color on the container you can make it appear that right column is always the same height as the left.

.container {
  background-color: green;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.firstcolumn {
  background-color: red;
  width: 50%;
}

.secondcolumn {
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="container">
  <div class="firstcolumn">
    <p>first column</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
  </div>
  <div class="secondcolumn">
    <p>second column</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
</div>

I need the second column (with longer content) not to grow taller that first column. — stanley90, Apr 12 '21 at 11:56

score 0 · Answer 2 · answered Apr 12 '21 at 12:38

0

You could also make a big div having those 2 divs inside.

At Div 1 there are all the information. Yo

Put the height of your right column to height: inherit; and the height of left column height:auto; should work

answered Apr 12 '21 at 12:38

iAmTheStaRx

1
1

mahan · Answer 3 · 2021-04-12T12:57:54.683

You need to absolutely position the second column, give it height:100%, and wrap its content in another container that has oveflow: scroll. The container need to have either height: inherit or height: auto

Both columns should have explicit width.

Example 1

.overflow-scroll {
  overflow: scroll;
}

.d-flex {
  display: flex;
}

.p-relative {
  position: relative;
}

.p-absolute-0 {
  position: absolute;
  right: 0;
  top: 0;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}


.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

<div class="d-flex p-relative">
  <div class="bg-red w-50">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque modi enim aut repudiandae id blanditiis tempore cupiditate eius veritatis rerum veniam minus laborum, hic nihil similique illo temporibus consequatur adipisci? Lorem ipsum dolor sit amet
    consectetur adipisicing elit. Consequatur minima et quod cumque inventore itaque earum saepe, ea amet rem labore! Sapiente unde tempora dolor illo magnam qui consectetur culpa!
  </div>
  <div class="w-50 p-absolute-0 h-100 bg-blue">
    <div class="overflow-scroll h-100">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?

      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
    </div>
  </div>
</div>

Example 2

.overflow-scroll {
  overflow: scroll;
}

.d-flex {
  display: flex;
}

.p-relative {
  position: relative;
}

.p-absolute-0 {
  position: absolute;
  right: 0;
  top: 0;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}



.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

<div class="d-flex p-relative">
  <div class="bg-red w-50">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt quia asperiores quidem nostrum id, nemo quis consectetur neque maiores, numquam temporibus? Autem, aliquid? Nemo ullam debitis placeat aperiam, voluptate distinctio! Incidunt, perspiciatis
    tempore nostrum, laboriosam facere ut exercitationem sapiente eligendi, velit veritatis numquam illum doloribus perferendis quas odio rerum eum. Recusandae officia tempore sed non excepturi quam sint minima ex. Assumenda fuga laborum ipsa perferendis
    ducimus quisquam harum et animi minus eius. Saepe ea mollitia facilis soluta! At doloribus accusantium sapiente rerum illum veritatis, quam eveniet iusto eius, quis tempora. Aperiam provident neque molestias saepe? Non quaerat quas nam earum, atque
    aperiam consectetur numquam tenetur, eius ducimus corrupti voluptatibus ad harum itaque obcaecati recusandae porro enim pariatur facere, labore cupiditate. Quod magni laborum, modi animi a nulla sit ea fugiat explicabo provident deserunt aliquid veniam
    odit quaerat maxime officia tempora earum enim. Voluptates officiis aliquam dolorum sunt laudantium cum earum?
  </div>
  <div class="w-50 p-absolute-0 h-100 bg-blue">
    <div class="overflow-scroll h-100">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
    </div>
  </div>
</div>

CSS two columns with one column height limited to another's content

3 Answers3

Example 1

Example 2

Linked