Make only part of child elements overflow:visible - html

Question

I need to have overflow-x: scroll like on first part of my image, and overflow visible to div bigger than its parent like on part 2 of my image.
So my problem is when I add overflow:visible to parent div, all overflows inside it are visible. I want to make overflow:visible, but keep overflow-x:scroll on parent div. Is it even possible?
HTML:
<div id="wrapper">
<div class="content">
<div class="child">
<button onclick="action(this)" class="triggerBtn">Click</button>
</div>
</div>
<div class="content">
<div class="child">
<button onclick="action(this)" class="triggerBtn">Click</button>
</div>
</div>
<div class="content">
<div class="child">
<button onclick="action(this)" class="triggerBtn">Click</button>
</div>
</div>
<div class="content">
<div class="child">
<button onclick="action(this)" class="triggerBtn">Click</button>
</div>
</div>
<div class="content">
<div class="child">
<button onclick="action(this)" class="triggerBtn">Click</button>
</div>
</div>
</div>
CSS:
#wrapper {
height: 200px;
width: 400px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
margin:auto;
background-color: rgb(240,240,240);
position: relative;
z-index: 1;
}
.content {
width: 200px;
height: 100%;
overflow-x: hidden;
display: inline-block;
position: relative;
z-index: 100;
background-color: rgb(200,200,200);
}
.child {
width: 200px;
height: 50%;
position: absolute;
left: 0;
top: 0;
/* transform: translateX(50%); */
background-color: #bada55;
border-radius: 5px;
z-index: 200;
transition: all .15s ease-in-out;
text-align: center;
}
div.child.active {
width: 400px;
left: -50%;
background-color: #111
}
Bunch of JS:
window.action = function(el) {
var parent = el.parentNode;
if(parent.classList.contains('active')) {
parent.classList.remove("active");
} else {
parent.className += " active";
}
};

Answer 1

a quick fix is to use !important on your child selectors, like so:
.parent {
overflow: visible;
}
.child {
overflow: hidden !important;
}
!important simply tells the system to use the style instead of inheriting the parent's styling. You can also use the immediate child selector >.