溢出-y 不使用 flex 滚动

Question

我正在聊天，但消息不会滚动。 消息转到“insere-msg”并使用 .msg-prop 类，它们存储在 Firestore 中，我使用 document.getElementById("insere-msg").innerHTML += message 添加它们。

HTML

<div id="corpo-msgs">
    <div id="insere-msg">
      <a class="msg-prop">Text</a>
      <a class="msg-prop">Text</a>
      <a class="msg-prop">Text</a>
      <a class="msg-prop">Text</a>
      <a class="msg-prop">Text</a>
    </div>
    <footer class="footer-msg">
      <input id="input-msg" class="form-control" type="text" placeholder="Digite sua mensagem" aria-label="Digite sua mensagem">
      <button id="envia-msg" class="btn btn-outline-light">Enviar</button>
    </footer>
  </div>

CSS

#corpo-msgs{
width: 95%;
height: 81vh;
background-color: var(--fundo-secundario);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 0;
}
.footer-msg{
    display: flex;
    flex-direction: row;
}
#insere-msg{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 10px;
    overflow-y: scroll;
    overflow: hidden;


  }

.msg-prop{
    text-align: center;
    padding: 10px;
    background-color: #F2AE30;
    margin-left: 20%;
    border-radius: 10px;
    flex: 1;
}

用codepen做的，不知道有没有帮助 https://codepen.io/heitor-de-paula-ramos/pen/WNrqoLg

Answer 1

好的，所以我放弃了 o flex 并使用 vertical-align: bottom 制作了 insere-msg inline-blog 并让消息 display: block 一切顺利。

Answer 2

#corpo-msgs{
overflow: hidden;
> #insere-msg{
overflow-y: scroll;
}

这将在右侧添加一个滚动条，如果您想删除该滚动条并仍然想要滚动，您还可以像这样添加一个 padding-right

#corpo-msgs{
overflow: hidden;
> #insere-msg{
overflow-y: scroll;
padding-right: 25%;
}