子 div 中的内容与父 div 重叠

Question

我的对话列表的内容重叠，我似乎无法调试它。我正在使用 vue，代码与 css 和图像一起在这里。我想要发生的是在预期的结果图像中，其中内容将保留在卡片的 div 中，就像在 messenger 中一样，如果文本太长，它将不会显示完整的文本。

<v-flex lg3 id="convolist-container" class="fill-height">
  <div id="convo-container" v-else>
    <div id="convo-container" v-for="chat in chats" :key="chat.chat_entry_id">
      <v-card max-height="150" v-on:click="displayChat(chat.service_order_id, chat.user_to, chat.user_from)">
        <v-layout id="convo-container" class="no-gutters" row lg3>
          <v-flex lg3 md3 xs3>
            <v-avatar class="mt-2 ml-2" size="36">
              <img :src=chat.prof_pic alt="Jihyo">
            </v-avatar>
          </v-flex>
          <v-flex lg6 md6 xs6>
            <v-layout row>
              <v-flex>
                {{chat.fullname}}
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex>
                {{chat.message}}
              </v-flex>
            </v-layout>
          </v-flex>
          <v-flex lg3 md3 xs3>
            {{chat.datetimestamp}}
          </v-flex>
        </v-layout>
      </v-card>
    </div>
  </div>
</v-flex>

CSS

 #convolist-container{
        height: 650px;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        border-style: solid;
        border-width: 1%;
        border-color: lightgrey;
    }

#convo-container{
    height: 50px;
    max-height: 150px;
}

Answer 1

我添加了 white-space: nowrap 并将最小高度设置为 50px 到#convo-container。为 #convo-container p { text-overflow: ellipsis; 添加了参考 ID溢出：隐藏； }