<main>
  <div class="wrapper">
    <article class="flow">
      <div class="cluster">
        <div class="chat-ui">
  <div class="chat-titlebar">
    <h5>Chat Window</h5>
    <div class="chat-avatar">
      <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
    </div>
  </div>
  
  <div class="chat-scrollview">
    <div class="chat-messagelist">
      
      <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
          <div class="chat-message">I'm a bot</div>  
          <div class="chat-message">Think of each message as a child in this chat window</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
          <div class="chat-message">I'm not a bot</div>
          <div class="chat-message">But I am static text that was put here by a human to help you learn about CSS Overflow!</div>
        </section>
      </div>
      
      <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Cool.</div>
          <div class="chat-message">I see this chat implementation is using the overflow property...</div>
          <div class="chat-message">Can you tell me more about that?</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">sure!</div>
          <div class="chat-message">Element `overflow` is a property set on an element to control what happens when the children of an element are requesting more space than it has available.</div>
          <div class="chat-message">Learn CSS can teach you more about overflow!</div>
        </section>
      </div>
      
    </div>
  </div>
  
  <div class="chat-authoring" contenteditable></div>
</div>
      </div>
    </article>
  </div>
</main>

.chat-ui, .chat-scrollview {
  overflow: visible;
}