How to Make Child Divs Use All Available Space When One Makes the Container Scroll

How to make child divs use all available space when one makes the container scroll?

display:grid on the container can do it

.item {
  white-space: nowrap;
}
.item:hover {
  background-color: #DDDDDD;
}
.container {
  max-width: 200px;
  overflow: auto;
  display:grid;
}

<div class="container">
  <div class="item">somewhat short item 1</div>
  <div class="item">somewhat short item 2</div>
  <div class="item">somewhat short item 3</div>
  <div class="item">very long item that makes the container scroll</div>
  <div class="item">somewhat short item 4</div>
  <div class="item">somewhat short item 5</div>
  <div class="item">somewhat short item 6</div>
  <div class="item">somewhat short item 7</div>
</div>

How to make child div scrollable when it exceeds parent height?

Overflow only works when you give it a value to overflow when greater than. Your value is relative to how big the top is, so using jQuery, grab that value then subtract from the parent.

$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});

and add overflow's to the children

.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}

http://jsfiddle.net/m9goxrbk/

Child DIV fill remaining height with scrollable content

Using flexbox can solve your problem.

A simple example:

.C {
  display: flex; /* this enables flex layout */
  flex-direction: column; /* child divs are placed in column */
  height: 300px; /* Parent container must have a fixed height */
}
.A {
  flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */
}
.B {
  flex: 1 1 auto; /* div B should fit the remaining space */
  overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */
}

For a live example, see this fiddle

Full width child elements inside scrollable container

Wrap the content in a div, and set it to display: inline-block:

#container {

  width: 200px;

  background-color: grey;

  overflow: auto;

  margin: 10px;

}

#container>div {

  display: inline-block;

}

#container p {

  display: block;

  background-color: green;

  white-space: nowrap;

}

<div id="container">

  <div>

    <p>Sample Text 1</p>

    <p>Sample Text 2</p>

    <p>A very very very very very long Sample Text</p>

  </div>

</div>

Allow overflow of child element while maintaining scrollability of parent

Wrap the contents of the div and the "other content" divs so that they are seperated from where the popup will be shown. Then use JavaScript to calculate the height.

const other = document.querySelector('.other');
var start = 100;
const button = document.getElementById('open');
button.addEventListener('click', () => {
  const child = document.querySelector('.child');
  child.insertAdjacentHTML('afterbegin', '<div class="popup"></div>');
  start -= 50;
  other.style.height = start + "px";
});

.container {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.popup {
  width: 150px;
  height: 50px;
  background: red;
}

.other {
  height: 100px;
  overflow: hidden;
}

<div class="container">
  <div class="child">
    <div class="other">
      <button id="open">Open</button>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
    </div>
  </div>
</div>

---

Related Topics