Estoy haciendo un chat de referencia de un video https://www.youtube.com/watch?v=wMlLgYyz_ws&t=1718s pero con la diferencia de que el mío debe ser full responsive.
Las modificaciones las hice con flexbox, no lo trabajé con grid porque ese es un módulo de otro proyecto que está todo en contenedores flexibles. Lo que sucede es que el chat funciona como en el video pero lo que ocurre es que cuando hay muchos mensajes me genera un scroll.
Busco que en un principio no se salgan los mensajes del contenedor principal, pero el problema esta en los inputs
donde se envía el mensaje que cada vez que hay mas mensajes quedan de último y para enviar otro prácticamente tocaría bajar todo el scroll.
¿Cómo hago para que el scroll quede fijo en la parte inferior y lo único que haga scroll sean los mensajes?
CÓDIGO:
@import url('https://fonts.googleapis.com/css?family=Mukta+Vaani');
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
background-color: brown;
}
.contenedor {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 2%;
}
.caja_chat {
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 40%;
height: 80vh;
background-color: wheat;
border-radius: 1%;
}
.datos_chat {
margin: 5%;
border-bottom: 1px solid black;
}
input[type="text"] {
width: 95%;
height: 2rem;
border-radius: 5%;
margin: 0 2% 1%;
}
input[type="submit"] {
width: 95%;
height: 2rem;
border-radius: 5%;
margin: 0 2% 1%;
}
textarea {
width: 95%;
height: 2rem;
border-radius: 5%;
margin: 0 2%;
}
<?php include_once ( "conexion.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<script type="text/javascript" src="recargar.js"></script>
</head>
<body onload="ajax();">
<div class="contenedor">
<div class="caja_chat">
<div id="chat"> </div>
<?php if (isset($_POST[ 'enviar'])) { $nombre=$ _POST[ 'nombre']; $mensaje=$ _POST[ 'mensaje']; $consulta="INSERT INTO mensaje (nombre, mensaje) values ('$nombre', '$mensaje')" ; $ejecutar=$ conexion->query($consulta); if ($ejecutar) { echo "
<embed loop='false' src='beep.mp3' hidden='true' autoplay='true'>"; } } ?>
<div class="form">
<form method="POST" action="index.php">
<input type="text" name="nombre" placeholder="Ingresa tu nombre">
<textarea name="mensaje" placeholder="Ingresa tu mensaje"></textarea>
<input type="submit" name="enviar" value="Enviar"> </div>
</form>
</div>
</div>
</body>
</html>