¿Cómo puede el padre verde cambiar su altura a medida que crece el niño amarillo? Si la entrada del usuario es muy alta, el niño amarillo aumenta su altura para incluir todo el texto, pero la altura del padre verde sigue siendo la misma. Me gustaría que el tamaño del padre verde aumentara hacia abajo. Quiero que la altura del padre sea proporcional a la altura del niño, si el niño es bajo, el padre debe ser pequeño, y si el niño es alto, el padre debe ser alto.
$(document).ready(function() { $("#send-btn").on('click', function() { $value = $("#input-user").val(); $replyMsg = ' <div class ="user-inbox"><div class ="reply"><p>' + $value + '</p> </div> </div>'; $(".main-content").append($replyMsg); $("#input-user").val(""); }) }); .main-content { position: relative; width: 300px; height: 300px; background: red; } .user-input { position: absolute; bottom: 0; } .instant-msg { position: relative; top: 0; left: 5%; width: 50%; height: 20%; background: cyan; word-break: break-all; } .user-inbox { position: relative; left: 45%; width: 100px; height: auto; width: 50%; height: 100px; background: green; } .reply { position: absolute; bottom: 10%; left: 10%; width: 80%; height: auto; min-height: 20%; border-radius: 25px; background: yellow; display: flex; align-items: center; justify-content: center; font-size: 100%; padding: 5%; word-break: break-all; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-content"> <div class="instant-msg"> <p>Hello</p> </div> <div class="user-input"> <input id="input-user" type="text" placeholder="Type something..." required> <button id="send-btn">Send</button> </div> </div>He simplificado su diseño haciendo que el elemento exterior sea una columna flexible y eliminando todo el posicionamiento absoluto. También reduje el objetivo de agregar a un contenedor interior y eliminé varios estilos de tamaño redundantes y rígidos. No debe establecer alturas fijas en elementos flexibles.
$(document).ready(function() { $("#send-btn").on('click', function() { $value = $("#input-user").val(); $replyMsg = ' <div class ="user-inbox"><div class ="reply"><p>' + $value + '</p> </div> </div>'; $("#inbox").append($replyMsg); $("#input-user").val(""); }) }); .main-content { width: 300px; min-height: 150px; background: red; display: flex; flex-direction: column; } .instant-msg { margin-left: 5%; width: 50%; background: cyan; word-break: break-all; } .user-inbox { margin-left: 45%; width: 50%; background: green; } .reply { margin-bottom: 10%; margin-left: 10%; width: 80%; height: auto; min-height: 20%; border-radius: 25px; background: yellow; display: flex; align-items: center; justify-content: center; font-size: 100%; padding: 5%; word-break: break-all; } .flex-auto { flex: auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-content"> <div class="instant-msg"> <p>Hello</p> </div> <div id="inbox" class="flex-auto"></div> <div class="user-input"> <input id="input-user" type="text" placeholder="Type something..." required=""> <button id="send-btn">Send</button> </div> </div>Esto es solo un problema de diseño de css. Solo necesita cambiar un par de css. Por favor, échale un vistazo. En contenido principal. He usado min-height en lugar de height y en instant-msg, he dado un tamaño de px estático en lugar de un valor de %.
.main-content { position: relative; width: 300px; min-height: 300px; background: red; padding-bottom: 26px; } .instant-msg { position: relative; top: 0; left: 5%; width: 50%; height: 60px; background: cyan; word-break: break-all; }