Html Question posted in
Some basic documentation can be found here.

Html – How to make two inner divs vertically grow together while outer div handles vertical overflow?

I have an outer div that has a max-height and overflow-y: auto.

Inside it are two divs side by side that may vertically due to the content inside either one of them.

The left div has a grey background and the right div has a white background.

I need both divs to grow vertically, but theyre constrained by the max-height I set on my outer div.

I want the left div and right div to expand vertically but there only be one scroll bar (on the outer div)

Here is the HTML:

<div class="outer">
  <div class="inner-left">
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
  </div>
  <div class="inner-right">
      Right Content
  </div>
</div>

Here is the CSS:

.outer {
  display: flex;
  overflow-y: auto;
  max-height: 100px;
  border: 1px solid black;
  padding: 16px;
}

.inner-left {
  background-color: grey;
  width: 50%;
}

.inner-right {
  background-color: white;
  width: 50%;
}

Here is a JSFiddle link: https://jsfiddle.net/mux67o34/

As you can see, the grey background of the left div doesn’t go down to the bottom of the outer div

Tags:

2

Answers


  1. 0

    Use the "overflow-y: scroll;" for .inner-right and .inner-left

    Login or Signup to reply.
  2. 0

    You should use display: grid to achieve inner divs with equal height.

    .outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
  max-height: 100px;
  border: 1px solid black;
  padding: 16px;
}

.inner-left {
  background-color: grey;
}

.inner-right {
  background-color: white;
}
    <div class="outer">
  <div class="inner-left">
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
      <div>Left Content</div>
  </div>
  <div class="inner-right">
      Right Content
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search