0

Estou querendo que a div filha 'sobreponha' a div pai que possui um overflow: hidden e um tamanho fixo. Essa div pai é um item de um de uma biblioteca de carrousel feita com JS e ele adiciona um tamanho fixo e um overflow: hidden e dentro dessa div eu tenho uma outra div que é no caso é um select personalizado feito em HTML e JS. Fiz um exemplo para mostrar qual é a situação:

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

3
  • Não bastaria mudar a propriedade overflow tal como fez no exemplo?
    – Woss
    Commented 26/04/2017 às 19:00
  • Até onde eu sei é impossível da forma que está feita. Somente tirando a div filha de dentro do overflow: hidden; ou retirando o overflow. Commented 26/04/2017 às 20:40
  • Eu tentei mudar a propriedade do overflow, mas ao fazer o slider ele fica todo quebrado. Eu perguntei pois se eu for usar um <select></select> ele funciona mesmo a div pai tendo o overflow Commented 27/04/2017 às 13:24

1 Resposta 1

1

A única forma de ser feita seria removendo o overflow da div pai, talvez pelo próprio javascript ou então pelo css

overflow: visible !important;

Caso essa div filha só apareça após algum evento, você pode reposicionar a div filha para outro lugar onde não haja a div pai com overflow, ou remover o overflow após o evento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .