How can I increase an element's height as child elements are added?

March 22, 2022

How can the green parent change his height as the yellow child grows? If the user input is very high, the yellow child increases his height to include all the text, but the green parent’s height remains the same. I would like the size of the green parent to increase downwards.
I want the parent’s height to be proportional to the child’s height, if the child is short, the parent should be small, and if the child is tall, the parent should be tall.

$(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>

>Solution :

I’ve simplified your layout by making the outer element a flex column and removing all the absolute positioning. I’ve also narrowed the append target to an interior container, and I removed several redundant and rigid sizing styles. You shouldn’t be setting fixed heights on flexible elements.

$(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>