Tengo un problema con un div que no se recorta al padre a pesar de que tiene overflow: hidden.

he mirado a través de la overflow: hidden preguntas aquí en stackoverflow pero la mayoría de ellos tienen problemas con position o parecen sugerir que mi código debería funcionar.

Aquí hay un MWE, puedes encontrar el jsfiddle aquí:

<div id="parent">
  <div id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

CSS:

#parent {
  height: 500px;
  overflow: hidden;
}

#scroller {
  overflow: scroll;
}

#child {
  height: 10000px;
}

lo que espero

#parent tiene overflow: hidden entonces #scroller se recorta a la altura del padre. Porque es #child es más alto que la altura resultante overflow: scroll da como resultado una barra de desplazamiento.

Lo que sucede

#scroller solo usa la altura de #child e ignora a los dos overflow propiedades.

¿Qué pasa con las soluciones simples?

• En mi problema del mundo real hay múltiples <div>pecado #parent entonces no puedo dar #scroller una altura.
• El html se genera automáticamente, por lo que no puedo eliminarlo #scroller.

Gracias por toda la ayuda, Stefan

RESPUESTA

En realidad, hay una respuesta de solo CSS en los comentarios con display: flex. Ver:

https://jsfiddle.net/huocukw7/6/

#parent {
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction:column;
}

#scroller {
  overflow: auto;
  flex-grow:1;
}

#child {
  height: 10000px;
}

Todo lo que necesita hacer es proporcionar height para usted #scroller

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

Manifestación

Según tu punto – En mi problema del mundo real, hay múltiples s en #parent, por lo que no puedo darle una altura a #scroller.

No hay otra manera de hacer que se pueda desplazar sin asignar un height lo. Sin eso, se extenderá hasta que finalice el elemento secundario, lo que no hará que su contenedor se pueda desplazar.

Puede usar JavaSript aquí, para calcular el height en tiempo de ejecución y añádalo al elemento.

En realidad, hay una respuesta de solo CSS en los comentarios con display: flex. Ver:

https://jsfiddle.net/huocukw7/6/

#parent {
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction:column;
}

#scroller {
  overflow: auto;
  flex-grow:1;
}

#child {
  height: 10000px;
}

Aunque dijiste que no puedes agregar una altura explícita a #scroller, ¿qué hay de agregar height:inherit;. Eso tiene el efecto deseado de agregar una barra de desplazamiento.

Para la posteridad: tuve este mismo problema al usar Foundation’s Reveal cubrir.

body.is-reveal-open tenía overflow: hidden;

.reveal-overlay tenía overflow-y: scroll; (

y mi elemento secundario que quería tener un cuadro de desplazamiento tenía una altura explícita grande, una altura máxima más pequeña y overflow: scroll.

Después de mucha depuración, reduje el problema y esto terminó arreglándolo:

.reveal-overlay {
  overflow: hidden; // changed from overflow-y: scroll
}

No me preguntes por qué funcionó esto, no tengo ni idea. Pero lo hizo.

Aquí hay una solución para el usuario de Bootstrap 4, lo que debe preocuparse es solo cómo colocar la clase correcta relacionada con Flex en el lugar correcto. Desde parent tiene solo 1 hijo directo, es bastante simple:

HTML

<div class="d-flex flex-column" id="parent">
  <div class="h-100" id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

CSS (No necesita hacer nada con CSS, solo lo copio de la pregunta)

#parent {
  height: 500px;
  overflow: hidden;
}

#scroller {
  overflow: scroll;
}

#child {
  height: 10000px;
}

Un consejo más: si tiene varios hijos directos bajo parent y requieren el scroller para llenar la altura restante de la parent <div>entonces tendrás que aplicar flex-grow-1 clase en lugar de h-100 hacia scroller. (Para aquellos que están familiarizados con el desarrollo de Android, el flex-grow-1 tener el mismo efecto que layout_height=0dp o layout_width=0dp en un diseño de restricción)