'How to set flexible height for parent div in css

How to set flexible height for parent div. In my code popup is there inside div. If I open the popup i want to increase the height of the parent div. I have used height:100% but it is not working. So, How to resolve this issue.

HTML:

<div class="main"> 
    <a href="#" open-popup>Popup</a>
    <maincontent class="content"> 
                 shadow-root(open)
                 <popup class="popup"> ..content..</popup> 
    </maincontent > 
</div>

CSS:

.main{
height:100%;
width:100%;
display:table;
border:2px solid #ccc;
}
.content{
display:flex;
justify-content:center;
}

Getting like this: enter image description here

Expected like this: enter image description here

htmlcss


Solution 1:[1]

You can use auto height

height: auto;

instead of

height:100%;

to not disturb height of parent div

Solution 2:[2]

To main class you can use display "block" property instead of "table" and heigth will be "auto" or just don't define it will take automatically take.

<div class="main">
<a href="#" open-popup>Popup</a>
<main class="content">
  shadow-root(open)
  <div class="popup"> ..content..</div>
</main>

.main{
  height:auto;
  width:100%;
  display:block;
  border:2px solid #ccc;
}
.content {
  display:flex;
  justify-content:center;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ch Atif
Solution 2 dipak harishbhai

Related Questions