Can I set the parent container as overflow: hidden but only specific child elements behave as if the parent is overflow: visible?

I have two child elements that are select field dropdowns inside of a parent container. The parent container is a modal I made for my project. I also have other children elements such as a title, text, and a button. I only want my two select field dropdowns to behave as if the parent container’s overflow is set to visible but the children elements behave as if the parent container’s overflow is set to hidden.

Essentially I want my drop downs to be visible outside of the parent when a user clicks the select field and the dropdown drops. While the other children are clipped within the parent container when I minimize the modal. I had ‘modal-container’ initially set to overflow: visible so my dropdowns were visible outside of the parent but when I minimized my modal, the rest of the children elements were visible outside of my parent container.

Here’s a general layout:

 <div className="modal-container">
      <div className="modal-inner-container">
        <h4 className="modal-header">header</h4>
        <div className="modal-text">
           <p>some text</p>
        </div>
        <div className="modal-dropdown-container">
           <div className="modal-dropdown></div>
           <div className="modal-dropdown></div>
        </div>
        <button className="modal-button">
      </div>
</div>

Is there any way to pull this off? I would need my dropdowns to be in between my text div and button so position absolute doesn’t apply in this case if I want my dropdowns relative to them.

I’m open to other suggestions.

Answer

Possibly you can do this with position: absolute; ‘on the children you want to overflow. Take a look at this example I made.

.contain {
  height: 100px;
  width: 100px;
  background-color: red;
  overflow: hidden;
}

.child1 {
  height: 30px;
  width: 30px;
  background-color: blue;
}

.child2 {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: absolute;
}

<div class="contain">
 <div class ="child1">one</div>
 <div class ="child2">two</div>
</div>

As you can see, child 2 expands beyond its parent even though the parent has an overflow that’s hidden.