0

I have two divs side by side, now I want the left container to define the height of the right one, so that the right one could be max the height of the left. So the right container should always have the height of the left one. Plus the right one has a fixed header and a scrollable content.

I also know that I can just give the right container position: absolute but I wonder if there is a more modern solution for this.

Asons
  • 84,923
  • 12
  • 110
  • 165
Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
  • please refer my below answer link: https://stackoverflow.com/questions/48312248/html-float-left-div-same-sizes-not-working/48314359#48314359 – Riddhi Jan 30 '18 at 07:59
  • 1
    try to get with this css https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – chirag solanki Jan 30 '18 at 08:00
  • 1
    Without seeing your code, flexbox will give you what you need. – Xoog Jan 30 '18 at 08:01
  • 2
    Possible duplicate of [How do I keep two divs that are side by side the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) – Hassan Imam Jan 30 '18 at 08:03
  • @HassanImam, the point is that only the left container should define the height of the parent – Andreas Köberle Jan 30 '18 at 09:33
  • `align-items: stretch;` on the flex container that holds both elements – Andy Holmes Jan 30 '18 at 09:42
  • @AndyHolmes doesn't make any difference, also how should the parent know that it need to took the height of the left one? – Andreas Köberle Jan 30 '18 at 10:01
  • Your flex container should contain the left and right element, align items stretch makes everything the same height - https://css-tricks.com/snippets/css/a-guide-to-flexbox#article-header-id-7 – Andy Holmes Jan 30 '18 at 10:02
  • Yes but only if the parent have a height, in my case the parent should have the height of the left container – Andreas Köberle Jan 30 '18 at 10:07
  • See my answer, the height is defined by the content and everything matches the left column – Andy Holmes Jan 30 '18 at 10:10
  • Possible duplicate https://stackoverflow.com/questions/43236467/make-two-elements-equal-height-one-with-a-vertical-scroll-bar/43240716#43240716 – Asons Jan 30 '18 at 11:16

1 Answers1

2

Is this what you're after? It's an example of what I'm saying in my comment

.container {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.left,
.right {
  width: 50%;
  padding: 20px;
  color: white;
}

.left {
  background: red;
}

.right {
  background: blue;
}
<div class="container">
  <div class="left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime
      fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam
      architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi
      impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati
      voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio
      animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
  </div>
  <div class="right">
    <p>less content</p>
  </div>
</div>

If this isn't right then please explain further as from what I can see this answers the points you've raised.

Edit

As per your comment, please check this code, this should give you the solution you need:

.container {
  display: flex;
  flex: 1;
  align-items: stretch;
  height: 100%;
}

.left,
.right {
  width: 50%;
  padding: 20px;
  color: white;
  display: flex;
}

.left {
  background: red;
}

.right {
  background: blue;
  position: relative;
  right: 0;
  overflow: scroll;
  position: relative;
}

.content {
  height: 100%;
  position: absolute;
}
<div class="container">
  <div class="left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
  </div>
  <div class="right">
    <div class="content">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
    </div>
  </div>
</div>
Andy Holmes
  • 7,817
  • 10
  • 50
  • 83