如何用CSS实现Div重叠时底部Div自适应高度避免重叠？

当然可以只用CSS实现这个需求，核心是借助Flex布局让容器内的元素自动分配垂直空间，同时给底部容器设置溢出规则，具体改造如下：

修改后的代码 #

CSS部分 #

* {
  font-family: Arial, Helvetica, sans-serif;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 20px;
  padding: 5px;
  width: 300px;
  height: 145px;
  /* 关键：设置flex垂直布局 */
  display: flex;
  flex-direction: column;
}

.content1,
.content2 {
  border-style: dotted;
  border-width: 2px;
  border-color: blue;
  margin: 1px;
  width: 268px;
}

.content1 {
  /* 确保顶部容器不被压缩，保持自身内容高度 */
  flex-shrink: 0;
}

.content2 {
  /* 占据容器剩余垂直空间，空间不足时自动压缩 */
  flex-grow: 1;
  /* 内容溢出时隐藏，也可根据需求改为overflow:auto显示滚动条 */
  overflow: hidden;
  /* 可选：多行文本溢出显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.title {
  font-weight: bold;
}

HTML部分 #

<div class="card">
  <div class="content1">
    <span class="title">
          This top div should compress the bottom div downwards without changing its position.
        </span>
  </div>
  <div class="content2">
    <span class="desc">
           This bottom div should respond by being compressed and show 1 less visible line with text overflow but not change position
        </span>
  </div>
</div>

关键逻辑说明 #

• Flex布局容器：给.card设置display: flex; flex-direction: column;，让内部两个子元素垂直排列，自动分配容器的垂直空间。
• 顶部容器规则：.content1的flex-shrink: 0确保它不会被压缩，始终保留自身文本内容所需的高度，即使顶部文本变长，也只会占用更多容器空间。
• 底部容器规则：.content2的flex-grow: 1让它占据容器剩余的垂直空间，当顶部文本占用空间增加时，底部容器的高度会自动缩小；同时通过overflow:hidden（或配合多行溢出省略号规则）处理文本溢出的情况，保证底部容器始终贴在容器底部，不会和顶部内容重叠。

内容的提问来源于stack exchange，提问作者user78709