¿Alguien puede sugerir una forma de hacer que el contenido de un div (cuando exceda el tamaño del div) se desplace hacia abajo?
De acuerdo con esta respuesta de Jim Hall refinada en los comentarios, puede hacerlo agregando un div adicional con lo siguiente:
display: flex; flex-direction: column-reverseSin embargo, esto no funciona para mí (el contenido simplemente se carga desplazado hacia arriba con el contenido inferior oculto).
Aquí está mi código:
CSS:
//El objetivo de la próxima clase es forzar un desplazamiento hacia abajo pero no funciona
.chatContainer { height: 500px; overflow: auto; display: flex; flex-direction: column-reverse; } .chatContents { width: 300px; border: solid 1px #EEE; display: flex; flex-direction: column; padding: 10px; max-height: 500px; overflow-y: scroll; }HTML:
<div class="chatContainer"> <div class="chatContents"> <div id = "bubbles"></div> </div> </div>Agradecería cualquier sugerencia sobre cómo hacer esto en CSS puro o con javascript simple (sin jquery, etc.)
Gracias por cualquier sugerencia.
Intente limitar el tamaño del div que contiene el chatbox como lo hice en el siguiente código:
var element = document.getElementById("chatbox"); element.scrollTop = element.scrollHeight; .chatContainer { height: 500px; overflow: auto; display: flex; flex-direction: column-reverse; } .chatContents { width: 300px; border: solid 1px #EEE; display: flex; flex-direction: column; padding: 10px; max-height: 500px; overflow-y: scroll; height: 25vh; overflow-x: hidden; } <div class="chatContainer"> <div class="chatContents" id="chatbox"> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hello </div> <div id = "bubbles"> hellodjfdjfhdjfhsdhskfhsdkhfsdkhfjsdhf </div> </div> </div>