Align-items/Align-content in flexbox

Quick question about the align content and align items. So, I noticed that your parent container needs to have height to use them. I noticed that if I set my li to have a certain height, and when I use either align-item or align-content that the height of the li’s is gone but then space is created using align-items and align-content. So, I am wondering if the height I originally gave my li is used as the space in space-around or space-between?

Here is the pen I am just messing around with if you need a visual to help my question make sense. When you get rid of the space around the li have height, but add the space-around back and that height is gone. Then if im not wrong align items is used for the content on the cross axis which im assuming is why it needs height, and align content is more for adding space between the flex lines