<div class="main-container">
    <div class="message-row">
    <div class="chatbox">
      <div class="message-mainbox"></div>
    </div>
    </div>
  </div>

/End HTML start css/
.main-container{
    display: top;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    height:98%;
    margin-bottom:10px;
    box-sizing: border-box;
    border: 5px solid red;
   	flex: 0 0 auto;
}
.message-row{
    margin: 15px;
  	border: 5px solid red;
    padding: 5px;
}
.chatbox{
    width:90%;
    margin-bottom:5px;
    background: pink;
    padding:5px;
    vertical-align: baseline;
    border-radius: 50px 50px 50px 0px;
}
.message-mainbox{
  background-color: #39beff;
  border-radius: 50%;
  width:90%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/.message-mainbox{ doesnt work, little in top
  width:90%;
    margin-bottom:5px;
    background: blue;
    border-radius: 50px 50px 50px 0px;
    padding:15px;
    vertical-align: baseline;
    margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;