How can I make a child element escape a parent with overflow: hidden without breaking my layout?

Question

I’m working on a layout where the parent element has the following properties:

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

The parent contains a child element (a <div> or <span>), and I want this child to visually move outside the boundaries of the parent by using negative margins or positioning.

The problem is that because the parent has overflow: hidden, the child gets cut and doesn’t show outside the parent’s boundaries.
I cannot remove overflow: hidden on the parent because removing it breaks the design of other elements on the page, such as images or containers.

Here’s a simple example of what I’m working with:

<div class="parent">
  <!-- Other content inside the parent -->
  <div class="child">
    activity name
  </div>
</div>

And the child CSS:

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

Currently, the child element is cut and does not appear outside the parent.

I have tried

• adjusting my margins and absolutr positioning
• adjusting z-index
• transform

What I’m looking for is a way to:

• Allow the child to escape the parent and appear outside its boundaries.
• Keep overflow: hidden on the parent so that other elements like images don’t break or overflow unexpectedly.

Can anyone suggest a solution for this?

Answer 1

Another method that seemed to work is to create a div element solely for the purpose of styling and make it the parent for your parent div and child" div. In this instance I gave it the class of super-parent.

In the CSS you will give the super-parent and parent declarations the same properties except for a few minor changes. This is assuming that the parent element must retain its styling for specific reasons for your design.

As seen in the code below, the super-parent and parent will share common properties, the only difference is the position property will be added separately for the super-parent and the overflow property will also be added separately for the parent declaration.

N.b. You may have to place stricter constraints on your height and widths . I placed strict limits on the height and width to allow me to easily work it.

.super-parent,
.parent {
  height: 200px;
  width: 500px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 0;
}

.super-parent {
  position: relative;
}

.parent {
  overflow: hidden;
}

.child {
  position: absolute;
  top: 40px;
  left: 400px;
  bottom: -20px;
  padding: 5px 10px;
  min-width: 50%;
  max-width: 300px;
  max-height: 100px;
  color: #fff;
  background: rgb(255, 145, 0);
  right: -15px;
  z-index: 3;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

<div class="super-parent">
  <div class="parent">
    <!-- Other content inside the parent -->
    <div class="child">
      activity name
    </div>
  </div>
</div>