Содержимое дочернего div перекрывает родительский div

Question

Содержание моих списков разговоров перекрывается, и я не могу его отладить. Я использую vue, и код здесь вместе с css и изображением. Я хочу, чтобы получилось изображение ожидаемого результата, где содержимое останется внутри div карты и, как и в мессенджере, если текст будет слишком длинным, он не будет отображать весь текст.

<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 и установил min-height равным 50px для контейнера # convo. Добавлен идентификатор ссылки для # convo-container p {text-overflow: ellipsis; переполнение: скрыто; }