How to make a child component visible outside its parent that has overflow:hidden

28 Feb 2023

Reading time 2 mins.

The short answer is it’s impossible.

It’s a purpose of an overflow with a value hidden that hides any content that overflows outside its parent.

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="wrapper">
    <!-- Image -->
    <div>
        <img src="./my-image.jpg">
    </div>
    <!-- Dropdown -->
    <div class="dropdown">
        <form>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </form>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.wrapper {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
}

.dropdown {
      position: absolute;
      inset: 0;
}

Or if you prefer seeing it in Tailwind CSS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="relative rounded-2xl overflow-hidden">
    <!-- Image -->
    <div>
        <img src="./my-image.jpg">
    </div>

    <div class="absolute inset-0">
        <!-- Dropdown -->
        <form>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </form>
    </div>
</div>

The result?

Hidden dropdown

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.

The solution is to take the child dropdown element outside of overflow: hidden parent by making it a sibling to overflow: hidden element.

I simply move a class of overfow:hidden from a parent to a child element - the div containing an image element.

Like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="relative">
    <!-- Image -->
    <div class="rounded-2xl overflow-hidden">
        <img src="./my-image.jpg">
    </div>

    <div class="absolute inset-0">
        <!-- Dropdown -->
        <form>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </form>
    </div>
</div>

Drum roll 🥁 🥁 🥁 ….

Shown dropdown

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