子 div 中的内容与父 div 重叠

Posted 2023-03-07

【中文标题】子 div 中的内容与父 div 重叠

【英文标题】：Content in child div is overlapping the parent div

【发布时间】：2020-09-12 21:03:10

【问题描述】：

我的对话列表的内容重叠，我似乎无法调试它。我正在使用 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- 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 >
            </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;

【问题讨论】：

是的，因为你设置了height: 50px

@Ifaruki 我怎样才能达到预期的效果？

移除 height 属性和 max-height 并设置 min-height: 50px 看看会发生什么

@Ifaruki 什么也没发生，它仍然与父 div 重叠..

只是一种预感，因为我无法测试它，将white-space: nowrap 放入您的#convo-container 也height: 50px; max-height: 150px; 没有用，因为您放置了静态高度，max-height 不会满足.. 我想你想放在那里的是min-height而不是height

【参考方案1】：

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