如何防止Flex项目塌陷并修复标题确保其正常显示？

嘿，我来帮你搞定这两个Flex布局的问题！先看看你的代码里的问题点，再一步步修复：

问题1：防止标题Flex项目塌陷 #

你的.cont容器是flex-direction: column的Flex布局，还设置了固定高度150px。默认情况下，Flex项目会根据内容调整高度，但当下面的文本内容过长时，它会抢占标题的空间，导致标题被“挤扁”塌陷。

修复方案：

• 给.title添加flex-shrink: 0，强制它不被压缩，保持自身应有的高度
• 给下面的文本容器添加flex: 1和overflow: auto，让它占据容器剩余的所有空间，内容过长时自动出现滚动条，不会再挤压标题

问题2：修复标题内部的显示异常 #

标题本身是Flex布局，但里面的文字如果过长，会出现换行或者排版错乱的情况。我们可以优化标题内的子元素样式，让布局更规整：

修复方案：

• 给标题左侧的文本添加flex: 1、overflow: hidden和text-overflow: ellipsis，让过长的标题显示省略号，不换行
• 给标题内的两个子元素都加white-space: nowrap，防止文字换行打乱布局

修改后的完整代码 #

.cont { 
  display: flex; 
  flex-direction: column; 
  width: 250px; 
  height: 150px; 
  border: 1px solid red; 
  overflow: hidden; 
}
.title { 
  display: flex; 
  background: #ccc; 
  justify-content: space-between; 
  flex-shrink: 0; /* 防止标题被压缩 */
  padding: 4px 8px; /* 加个内边距更美观 */
}
.title > div:first-child {
  flex: 1; /* 占据标题内剩余空间 */
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; /* 不换行 */
  margin-right: 8px; /* 和日期保持间距 */
}
.title > div:last-child {
  white-space: nowrap; /* 日期不换行 */
}
.cont > div:last-child {
  flex: 1; /* 占据容器剩余空间 */
  overflow: auto; /* 内容过长时显示滚动条 */
  padding: 4px 8px; /* 加内边距 */
}

<div class="cont">
  <div class="title">
    <div>title that collapse and is really long to test ellipsis</div>
    <div>28/3/2018</div>
  </div>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab sapiente provident iure ipsa ipsum nulla, voluptatem repellat obcaecati fugiat, voluptas, ea veritatis? Quasi, molestiae consequatur. Voluptatem eius amet accusantium voluptate.</div>
</div>

效果说明 #

• 标题现在会保持固定高度，不会被下面的内容挤压塌陷
• 过长的标题文字会显示省略号，日期始终保持在右侧不换行
• 下面的文本内容会占据剩余空间，过长时自动出现滚动条，不会影响标题布局

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