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

Question

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>

Answer 1

This is just a css layout issue only . You need to change couple of css only. Pleae check it out . In main-content. I have used min-height instead of height and in instant-msg, I have given static px size instead of % value.

.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;
}

Answer 2

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>