Solved - Stretch vertically to fill space inside flex direction: column-CodePudding

I have a list of items

<ul>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ul>

And the ul element is styled how I would like it

However, the li item does not stretch to fit, no matter what I seem to try on the li element

I've tried applying stretch to it, I've even tried to set the height of the li element to calc(85vh / 6) since there are 6 elements inside

It is critical that the li elements are exactly ( container size / 6 ) since this is part of a navigation, and the li element contain absolute elements that need to line up further down the tree

ul{
    display:flex;
    flex-direction: column;
    position:absolute;
    margin-top:15vh;
    height:85vh;
    background-color:#FFF;
    padding:5vmin;
    width:50%;
  }
ul > li{
    align-self: stretch;
  }

Oh, this needs to be CSS-only

Note the pink areas below, this should all be white when inspecting (no space)

Does anyone know where I am going wrong?

EDIT: @nemus, thanks for the great answer - I can see this works in your codepen, but it doesn't work on my project for some reason, I can't work it out

EDIT: ok, so I made a stupid! ul changes from grid to flex depending on mobile or desktop, and it still had grid-gap property! If anyone sees this and has the same problem, check you don't have grid-gap!

CodePudding user response：

Greeting, I assume that you want to make 6 even <li> elements inside <ul>. If you have defined height for your <ul> you can use height: calc(100% / 6) on <li>

Example: https://codepen.io/nemuss/pen/abLrMqO

CodePudding user response：

You need to apply justify-content to the ul

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 85vh;
  background-color: #FFF;
  padding: 5vmin;
  width: 50%;
  list-style: none;
  border: 1px solid red;
  justify-content: space-between;
}

ul>li {
  border: 1px solid green;
  flex: 1;
  margin-bottom: 1em;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

CodePudding user response：

ul{
    display:flex;
    list-style-type: none;
    justify-content: space-between;
    flex-direction: column;
    margin-top:15vh;
    height: 35em;
    background-color:#FFF;
    padding:5vmin;
    width:50%;
    border: solid;
  }
ul > li{
      text-align: center;
    padding: 20px;
    background-color: red;
    border: solid;
  }

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>