<h2 id="heading-why-do-we-need-to-specify-the-height-of-the-parent-container-when-we-do-align-items">Why do we need to specify the height of the parent container when we do align-items</h2>
<ol>
<li>The div tag by default is a block-level element.
</li>
<li>When we have another div and then we make the parent div tag as flex then if we dont give a height then the cross axis will be equal to the height of the container and then if we apply align -items nothing will move because the height of the container is the height of the content.
</li>
<li>To actually feel the change is the position when we apply align items it hence becomes more important for us to give the parent container a height
</li>
<li>Only then will the align-items property show some effect on the box
</li>
<li>Refer to the image below to get an idea of cross axis works
 <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1693762506897/ad0bfd89-e919-4632-8a8a-b03bac1cc660.png" alt class="image--center mx-auto" />
</li>
</ol>

## Why do we need to specify the height of the parent container when we do align-items

1. The div tag by default is a block-level element.
    
2. When we have another div and then we make the parent div tag as flex then if we dont give a height then the cross axis will be equal to the height of the container and then if we apply align -items nothing will move because the height of the container is the height of the content.
    
3. To actually feel the change is the position when we apply align items it hence becomes more important for us to give the parent container a height
    
4. Only then will the align-items property show some effect on the box
    
5. Refer to the image below to get an idea of cross axis works
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693762506897/ad0bfd89-e919-4632-8a8a-b03bac1cc660.png align="center")

Css Flexbox

Table of contents

Why do we need to specify the height of the parent container when we do align-items