溢出：滚动不显示 div

Question

我试图在反应中制作一个消息页面，我已经向消息 div 容器添加了溢出滚动，但它没有显示所有消息内容。我什至将高度添加到消息容器，但问题仍然存在。

这是我的CSS代码，

CSS：

.message {
    display: flex;
    justify-content: center;
    .container {
      width: 1200px;
      margin: 50px;
      .breadcrumbs {
        font-weight: 300;
        font-size: 13px;
        color: #555;
      }
      .messages {
        margin: 30px 0px;
        padding: 50px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 500px;
        overflow: auto;
  
        .item {
          display: flex;
          gap: 20px;
          max-width: 600px;
          font-size: 18px;
  
          &.owner {
            flex-direction: row-reverse;
            align-self: flex-end;
  
            p {
              max-width: 500px;
              border-radius: 20px 0px 20px 20px;
              background-color: #142e99;
              color: white;
            }
          }
  
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
          }
  
          p {
            max-width: 500px;
            padding: 20px;
            background-color: #ff9b54;
            border-radius: 0px 20px 20px 20px;
            color: white;
            font-weight: 300;
          }
        }
      }
    }
  } 

请帮我解决这个问题

我尝试添加 height: auto 但它占用了整个容器的所有空间。