0

I would like to know how do I make the list items of a container that has its height set to 100%, extend vertically to its full potential or until of the items have equalized vertically.

We have a side vertical bar right? Now inside that bar we have icons. The icons are align vertically using display:flex; flex-flow:column; By default the list items are on the upper most of the side bar. Here!

Well I want the items(icons) to be full height so that its even vertically on the bar. Like this!

Basic code

html

<!-- right bar -->
<div class="FullH">
  <section>
    <span class="Xm_flex-col" >
<!--   i want these to take as much space as posible vertically     -->
      <li>GF</li>
       <li>GF</li>
         <li>GF</li>
       <li>GF</li>
    </span>
  </section>
</div>

Css

html,body{
  height:100%;
}
.FullH{
  height:100%;
  border-right:1px solid gray;
  background:blue;
  padding:1rem;
  width:1rem;
    display:flex;
}
li{
  list-style-type:none;
}
.Xm_flex-col{
  display:flex;
  flex-direction:column;
}

Site

https://xlaeo.tk/XM_IG/projecthm/Xproject.html

Hope everything makes sense.

Wovasteen Gova
  • 66
  • 7
  • 3
    `height:100%` on all the nested container until you reach `xm_flex-col` ... then on it you use `justify-content:space-between` – Temani Afif Mar 31 '18 at 07:46
  • Possible duplicate of [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – Klors Nov 16 '18 at 13:41

0 Answers0