How to make a child component visible outside its parent that has overflow:hidden
Created:
The short answer is it’s impossible.
The purpose of an overflow
with a value hidden
is to hide any content that overflows outside its parents.
Problem
In my initial setup, I had a parent div with overflow:hidden
to clip the image in rounded
corners with a relative
position.
What I also want is to have a dropdown component on top of the image, so I set an absolute
position to the dropdown like this 👇
Note: To make the code easier to read, I only show the relevant code and not all of the styling.
|
|
|
|
Or if you prefer seeing it in Tailwind CSS. Notice that the overflow-hidden
class is on the parent
element as highlighted.
|
|
Here is the result
As you see, the dropdown element isn’t visible outside the image, I have to scroll down to see all the dropdown options.
This is caused by a class of overflow:hidden
on the parent element, therefore all
of its children will not be visible outside the parent element.
Solution
The solution is to change the structure of HTML by taking the child dropdown element outside of overflow: hidden
parent by making it a sibling to an overflow: hidden
element.
Below is HTML and CSS structure. Notice that overflow: hidden;
is now on <div class="image-wrapper">
instead of <div class="wrapper">
.
|
|
|
|
This is an equivalent in Tailwind CSS.
|
|
Here is the result, Drum roll 🥁 🥁 🥁 ….
The dropdown is now visible outside the image and I don’t have to scroll down to see all the options like before.
Back to blog