I added the white-space: nowrap and set the min-height to 50px to the #convo-container. Added a reference id for #convo-container p { text-overflow: ellipsis; overflow: hidden; }

The content of my conversation lists is overlapping and I can’t seem to debug it. I am using vue and the code is here together with the css and image. What i want to happen is in the expected result image where the content will stay inside the div of the card and just like in messenger, if the text is too long, it will not display the complete text.

<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;
}