能否拉伸父div？书籍列表布局的CSS实现需求咨询

嘿，这个需求完全可以用纯CSS搞定，根本不用写JS！我给你理清楚实现思路，再附个完整的可运行案例：

核心布局逻辑 #

我们利用Flex布局的特性，结合文本溢出截断的CSS属性，就能完美实现你的需求：

• 父容器固定尺寸，开启滚动以容纳过长的书籍列表
• 每本书的容器用Flex布局，让标题和规格在同一行排列
• 标题设置为填充剩余空间，同时开启文本溢出截断
• 规格直接使用服务端定义的宽度，保持固定尺寸不被压缩

完整代码案例 #

HTML结构 #

<div class="book-list">
  <div class="book-item">
    <div class="title">JavaScript高级程序设计（第4版）从入门到精通前端开发必读经典书籍</div>
    <div class="spec" style="width: 120px">平装/1000页</div>
  </div>
  <div class="book-item">
    <div class="title">CSS权威指南（第3版）Web样式设计圣经</div>
    <div class="spec" style="width: 90px">精装/850页</div>
  </div>
  <div class="book-item">
    <div class="title">React设计模式与最佳实践构建可维护的大规模React应用</div>
    <div class="spec" style="width: 150px">平装/520页/2023版</div>
  </div>
  <div class="book-item">
    <div class="title">Node.js实战（第2版）深入理解Node.js核心特性与开发技巧</div>
    <div class="spec" style="width: 110px">精装/680页</div>
  </div>
</div>

CSS样式 #

/* 固定尺寸的父容器，超出滚动 */
.book-list {
  width: 400px;
  height: 200px;
  overflow: auto;
  border: 1px solid #eee;
  padding: 8px;
  font-family: sans-serif;
}

/* 每本书的Flex容器 */
.book-item {
  display: flex;
  align-items: center;
  gap: 12px; /* 标题和规格之间的间距 */
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}

/* 标题：填充剩余空间，超出省略 */
.title {
  flex: 1; /* 占据除规格外的所有剩余空间 */
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  min-width: 0; /* 关键！解决Flex布局下文本过长撑破容器的问题 */
}

/* 规格：使用服务端定义的宽度，添加基础样式 */
.spec {
  text-align: right;
  color: #666;
  font-size: 0.9em;
}

关键细节说明 #

• min-width: 0 是标题样式里的核心：Flex布局中，flex项的默认min-width是auto，会根据内容宽度自动撑开容器，导致overflow: hidden失效。设置min-width: 0后，标题会被限制在分配的空间内，超出部分才会被截断。
• 规格的宽度由服务端通过style属性传递，Flex布局会自动保留这个宽度，不会压缩或拉伸它。
• 父容器的overflow: auto确保当书籍列表过长时，自动出现滚动条，保持父容器尺寸固定。

这个方案完全不需要JavaScript，性能更好，也更易维护，完美匹配你的需求！

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