I'm doing a video reference chat link but with the difference that the mine must be full responsive .
The modifications I made with flexbox , I did not work with grid because that is a module of another project that is all in flexible containers. What happens is that the chat works like in the video but what happens is that when there are many messages it generates a scroll.
I am looking for messages from the main container, but the problem is in inputs where the message is sent that every time there are more messages left last and to send another one, it would practically touch all the scroll .
How do I make the scroll fixed in the bottom and the only thing that scroll is the messages?
CODE:
@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>