Give items to full height of container with height of 100%

Question

Hey 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.

Ok so 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 right?

Well I want the items(icons) to be full height so that its evenly vertically on the bar.

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.