Div daughter override the parent div that has overflow: hidden

0

I'm wanting the div div 'overlap' the parent div that has an overflow: hidden and a fixed size. This parent div is an item from one of a carrousel library made with JS and it adds a fixed size and an overflow: hidden and inside that div I have another div that is in case it is a custom select done in HTML and JS. I gave an example to show what the situation is:

.pai{
  width: 150px;
  height: 60px;
  overflow: hidden;
  border: 3px solid red;
  margin-bottom: 50px;
  text-align: center;
}

.pai.sem-overflow{
  overflow: inherit;
}

.pai .filha{
  width: 70px;
  height: 150px;
  margin: 0 auto;
  border: 3px solid blue;
  margin-top: 15px;
}
<h2>Como está atualmente</h2>

<div class="pai">
    div pai com overflow
    <div class="filha">
        div filha
    </div>
</div>

<h2>Como eu gostaria que ficasse</h2>

<div class="pai sem-overflow">
    div pai <strong>sem overflow</strong>
    <div class="filha">
        div filha
    </div>
</div>
    
asked by anonymous 26.04.2017 / 20:56

1 answer

1

The only way to do this would be to remove the overflow from the parent div, perhaps by javascript itself or by css

overflow: visible !important;

If this child div only appears after some event, you can reposition the child div to another place where there is no overflow parent div, or remove the overflow after the event.

    
26.04.2017 / 23:33