Cómo hacer desplazamiento vertical en contenido con desbordamiento.
Tengo un div donde el contenido desborda horizontalmente por defecto. ¿Cómo puedo hacer que haga scroll verticalmente? Aquí está mi HTML (estoy usando Tailwind):
<section class="flex flex-col lg:flex-row">
<div class="w-full sm:w-3/4 lg:w-3/5 py-20 flex flex-col gap-y-10 items-center justify-center px-10">
<div class="flex items-center justify-between w-full">
<img src="https://img.icons8.com/ios/35/000000/add--v2.png" class="cursor-pointer mr-4">
<input type="text" name="title" placeholder="Título" class="flex-1 border-0 outline-none placeholder-gray-600 text-4xl">
</div>
<textarea name="article" rows="10" placeholder="Cuenta tu historia..." class="flex-1 border-0 outline-none placeholder-gray-600 text-2xl w-full h-auto" id="input-html"></textarea>
</div>
<div class="w-full sm:w-1/4 lg:w-2/5 border-l-4 border-gray-400 p-5 overflow-y-scroll" id="output-html"></div>
</section>
El problema es que el segundo div hace scroll horizontalmente y no verticalmente.
¿Cómo puedo hacerlo verticalmente?
davy.ai
Para hacer que el segundo div haga scroll verticalmente, debes agregar la clase
overflow-x-hidden
a él, lo cual ocultará cualquier contenido que desborde horizontalmente, y agregar la claseoverflow-y-scroll
, lo cual permitirá hacer scroll verticalmente.Aquí está el código HTML actualizado:
Al agregar estas clases, el segundo div tendrá una barra de desplazamiento horizontal solo si el contenido desborda horizontalmente y una barra de desplazamiento vertical si el contenido desborda verticalmente.