prevent popover from creating scroll in parent (in pure css) - html

Question

I would like to create a simple popover that displays in place (think about a combobox list below a button). The popover should display over existing elements, i.e. not pre allocate space.
There are many examples using `position: relative -> overflow: hidden -> position: absolute' hierarchy and the work until the popover flows off the bottom of the container, in which case its size affect the parent container and creates a scroll.
Here is a codepen sample. What I'm trying to get is to have no scroll on the rightmost column.
<div class="main">
<div class="column">
<h2>no overflow</h2>
<div class="tall">x</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>basic overflow</h2>
<div class="tall">x</div>
<div class="tall">x</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>popover without overflow</h2>
<div class="tall">x</div>
<div class="overlay">
popover should be vislble below
<div class="overflow">
<div class="absolute short">
z
</div>
</div>
</div>
<div class="tall">x</div>
</div>
<div class="column">
<h2>popover with overflow</h2>
<div class="tall">x</div>
<div class="overlay">
popover should be vislble below
<div class="overflow">
<div class="absolute">
z
</div>
</div>
</div>
<div class="tall">x</div>
</div>
</div>
and the scss file:
html, body {
height: 95%;
}
.main {
display: flex;
flex-direction: row;
border: 2px solid red;
height: 100%;
.column {
margin-left: 20px;
height: 100%;
flex: 1;
border: 1px solid black;
overflow-y: auto;
.tall {
height: 300px;
border: 1px solid blue;
}
.overlay {
position: relative;
.overflow {
background: #F00;
overflow: hidden;
.absolute {
opacity: 0.5;
width: 100%;
height: 600px;
position: absolute;
background: #FF0;
&.short {
height: 200px;
}
}
}
}
}
}

Answer 1

I think (if I'm clear about the question) that this issue can be pretty easily resolved by simply substituting the height of your tall class with min-height and max-height If you set the min-height equal to the short height then the popover shouldn't overflow.
I made my own codepen do demonstrate (i adjusted the popover to 100 in height and set the min-height also to 100 for demo) . The code is the same as the code you posted except for the height in the .short class and min-/max-heights in the .tall class. I added overflow:hidden; to the short class in the event that the the height of the content in the popover being greater than the height assigned.
I have commented out the columns with no popovers but feel free to comment them in.
Hope this helps