CSS Parent div take 100% of the height but UL won't shrink and scroll-CodePudding

I have this html and css which makes all div's inside divide to 100% height.

The below works as required:

HTML

<section >

    <div >
        <h5>One</h5>
    </div>
  
    <div >
        <h5>Two</h5>
    </div>
  
    <div >
        <h5>Three</h5>
    </div>
  
    <div >
        <h5>Four</h5>
    </div>
  </section>

CSS

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}
  
.some-area {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
}

The problem is here.

Further to the above I need to add a title and list which also needs to shrink or expand to it's parent which is .some-area class.

And when too small the UL needs to scroll Y.

So here is what I've done:

HTML

<section >

    <div >
        <h5>One</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div >
        <h5>Two</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div >
        <h5>Three</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div >
        <h5>Four</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  </section>

CSS

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}
  
.some-area {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
}

But the issue with this one is that the UL won't expand 100% of the available space.

How can I fix this? I need the UL height to be responsive.

CodePudding user response：

You can solve it easily without flex. Here's the code: HTML:

<section >

    <div >
        <h5>One</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div >
        <h5>Two</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div >
        <h5>Three</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div >
        <h5>Four</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
</section>

CSS:

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
}
.some-area {
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
    overflow-y: scroll;
}

JS:

let areaNum = document.getElementsByClassName("some-area").length;
for (let area of document.getElementsByClassName("some-area")) {
  area.style.height = 100 / areaNum   "%";
}

Note: This code will work with any number of divs (some-areas), not just four;