Div daughter override the parent div that has overflow: hidden

Question

Div daughter override the parent div that has overflow: hidden

Navigation

#1 by (1 votes)

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>

javascript html css

asked by anonymous 26.04.2017 / 20:56

1 answer

Authentication with Facebook and Google in Firebase - Android Studio I can not increment my variable without resetting the code

score 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.