How can I prevent a child list from exceeding the height of its flex parent, while still growing with its own content?

Note:

This is a revisiting of this previously solved issue:

Desired appearance with many list items:

Desired appearance with few list items:

CodePudding user response：

Remove your max-height: 300px; style on wrapper and set the height to 100%. max-height: 300px; is telling the browser the parent cannot expand its height any more than 300px. This now means your parent height will not be any lower than 300px. Hence, min-height: 300px; But now when you add additional content it will expand to the amount of content nested in the parent. I pasted all your children again to demonstrate the height expansion.

.wrapper {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 3px solid red;
  height: 100%;
 }
 
 .child {
  flex: 0 1;
  background: lightgray;
 }
 
 .list_wrapper {
  display: flex;
  flex-direction: column;
  flex: 0 1;
  background: yellow;
 }
 
 ul {
  display: flex;
  flex-direction: column;
  flex: 1 1 1px;
  overflow-y: auto;
  border: 2px dashed purple;
 }

<div >
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <div >
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
  </div>
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <p>Hello World</p>
  </div>
    <div >
    <p>Hello World</p>
  </div>
  <div >
    <div >
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
  </div>
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <p>Hello World</p>
  </div>
</div>

CodePudding user response：

I think you are looking to make your entire .wrapper element scroll-able if its scrollHeight is greater than 300px, correct?

If this is the case you can check the scrollHeight of the wrapper element, if it is greater than 300px, then you can toggle a helper class that will add overflow-y: scroll rule to that element.

If I have misinterpreted your intent, please let me know and I can adjust my answer or remove it.

let wrapper = document.querySelectorAll('.wrapper');

function addScrollable(target){
  target.forEach(el => {
    el.scrollHeight > 300 ? el.classList.toggle('scroll') : null;
    let explaination = `<span >Content in wrapper element is <span >${el.scrollHeight}px</span> in height</span>`
    el.insertAdjacentHTML('afterbegin', explaination)
  })
}

addScrollable(wrapper);

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 3px solid red;
  max-height: 300px; 
  position: relative;
}
/* added helper class to be toggled with overflow on y axis */
.scroll { 
  overflow-y: scroll;
}
/* Display purposes only */
.red {
  background-color: pink;
  padding: 0 3px;
}
/* Display purposes only */
.abs {
  position: sticky;
  top: 0;
  left: 30%;
  background-color: rgba(255, 255, 255, .5);
  padding: 2px;
}
.child {
  flex: 0 1;
  background: lightgray;
}

.list_wrapper ul {
  display: flex;
  flex-direction: column;
  flex: 0 1;
  background: yellow;
}

ul {
  display: flex;
  flex-direction: column;
  flex: 1 1 1px;
  overflow-y: auto;
  border: 2px dashed purple;
}

<div >
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <div >
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
  </div>
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <p>Hello World</p>
  </div>
</div>

<div >
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <div >
      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    </div>
  </div>
  <div >
    <p>Hello World</p>
  </div>
  <div >
    <p>Hello World</p>
  </div>
</div>