How to perfectly adjust the chat room layout block through CSS

Question

this time I encountered a CSS cutting board problem. I would like to ask you a question here. I have dealt with it myself for two days and still cannot overcome the problem~ My English is not good, I try to describe it completely, sorry~ The

problem is as follows: There is a chat room. The blue color is a space between the menu of the webpage and the chat area below (the white side is the distance that must be maintained).

Problem 1: My chat room is set by the designer because of the size, but because of the chat room The content of the window is very large, so in the end there will be a scroll on the right side of the entire window, but in fact the scroll should not appear at the end.

Question 2: When the messages continue to increase in the yellow conversation in the chat room, it can be scrolled just like normal communication software. I have set calc(100vh-295px) in chat_body. Why do I set 295 arbitrarily? This is because I don’t want the chat dialogue area to cause problems with the entire layout due to the increase of messages, but now how to set it will cause scrolling to the bottom. The message will be blocked by the green block below, or the chat dialogue area will cause too much message content to run out of the publishing page. Question~I

want to ask you how to set up to achieve a complete view of the content of the entire chat dialogue area, and fix the entire chat room window at the bottom of the entire web page without scrolling on the right side?

Thank you for watching my question.

.wrap {
  width: 90%;
  margin: 0 auto;
}

.head {
  width: 100%;
  height: 60px;
  background-color: blue;
  margin-bottom: 80px;
}

.chat {
  background-color: #ccc;
  height: calc(100vh - 80px);
  display: flex;
}

.chat_list {
  flex: 1;
  height: 100%;
  background-color: #ee3f4d;
}

.chat_area {
  position: relative;
  flex: 2;
  background-color: #35333c;
}

.chat_head {
  background-color: #51c4d3;
  height: 60px;
}

.chat_body {
  overflow-y: auto;
  height: calc(100vh - 295px);
}
.chat_body .other_txt {
  display: block;
  background: yellow;
  padding: 8px;
  border-radius: 0 20px 20px 20px;
  margin: 10px;
}
.chat_body span {
  color: #ccc;
}
.chat_body .own_txt {
  display: block;
  background: yellow;
  margin-left: auto;
  padding: 8px;
  border-radius: 0 20px 20px 20px;
  margin: 10px;
  white-space: pre-wrap;
}

.chat_input {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #43b244;
  height: 150px;
}
.chat_input .input_message {
  resize: none;
  width: 90%;
  height: 60px;
  margin: 12px 24px;
}

<!-- 聊天室畫面結構 -->
<div class="wrap">
  <div class="head">head</div>
  <div class="content">
    <div class="chat">
      <div class="chat_list">contact__list</div>
      <div class="chat_area">
        <div class="chat_head">contact__tool</div>
        <div class="chat_body">
          <div class="other">
             <p class="other_txt">
               hello~
             </p>
             <span>20210827 10:00</span>
          </div>
          <div class="own">
            <p class="own_txt">
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you?
               hello~how aru you? 
             </p>
             <span>20210827 10:00</span>
          </div>
           <div class="own">
            <p class="own_txt">
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
             </p>
             <span>20210827 10:00</span>
          </div>
           <div class="own">
            <p class="own_txt">
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
             </p>
             <span>20210827 10:00</span>
          </div>
           <div class="own">
            <p class="own_txt">
             I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
              I'm fine, thank you~ how about you
             </p>
             <span>20210827 10:00</span>
          </div>
        </div>
        <div class="chat_input">
           <textarea class="input_message" placeholder="enterMessage"></textarea>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

For question 1, if you want to remove the slide bar for div chat_body, you can change y-overflow accordingly, like hidden.

For question 2, if you want to remove the slide bar for whole html page, you can change the css property of .chat: height: calc(100vh - 140px), then the slide bar for whole html page will be disappered.

Honestly I still cannot understand your requirements after multiple readings, you can share more details about your requirements here.