点击展开子列表时父列表自动适配高度的CSS实现方案

该效果完全可以仅通过CSS实现，无需编写任何JavaScript代码。

问题原因 #

当前代码出现内容裁切，核心是两个写法问题：

• 给多层嵌套的<details>元素、一级子列表容器.romanOne都设置了固定写死的高度，子列表展开时父元素的固定高度不会随内容增长，溢出内容直接被裁切
• 子列表设置了float: right浮动，但父容器没有清除浮动，父级计算高度时不会把浮动子元素的完整高度算入，进一步加剧内容裁切问题

修改方案 #

核心思路是：收起状态仅保留摘要栏的固定高度，展开状态所有父级容器高度设为自适应，同时清除浮动避免高度塌陷，保留原有动画和交互效果。

• 删除所有为不同层级<details>单独写死的展开态固定高度，统一用属性选择器控制所有details的高度规则
• 修正.romanOne的固定高度为自适应，给所有包含浮动子元素的容器加清除浮动规则
• 调整列表项的布局规则，避免flex布局和浮动冲突导致的高度计算异常

修改后可直接使用的CSS代码（替换原有对应部分即可） #

body {
  background-color: #212121;
  color: #fff;
  font-family: arial;
  font-size: 32px;
  cursor: default;
}

.romanOne {
  font-family: timesnewroman;
  float: right;
  margin-right: 15px;
  width: 590px;
  height: auto;
  text-align: left;
}

.romanTwo {
  font-family: timesnewroman;
  float: right;
  margin-right: 15px;
  width: 590px;
  height: auto;
}

.romanThree {
  font-family: timesnewroman;
  float: right;
  margin-right: 15px;
  width: 590px;
  height: auto;
}

.FontFormatHeading {
  text-align: center;
  font-size: 52px;
}

.FontFormat {
  position: relative;
  width: 700px;
  margin: -20px auto 0px;
  padding: 20px;
  box-sizing: border-box;
  list-style: none;
  background: rgba(0, 0, 0, .2);
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.FontFormat li {
  display: flex;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  margin: 5px 0;
  transition: .5s;
  border-radius: 20px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.FontFormat li:nth-child(1) {
  background-color: rgba(201, 201, 201, 0.4);
}

.FontFormat li:nth-child(2) {
  background-color: rgba(201, 201, 201, 0.3);
}

.FontFormat li:hover {
  transform: scale(1.05);
  background: #212121;
}

.AttributeHeading {
  font-size: 52px;
  text-align: center;
}

.AttributeFormat {
  position: relative;
  width: 700px;
  margin: -20px auto 0px;
  padding: 20px;
  box-sizing: border-box;
  list-style: none;
  background: rgba(0, 0, 0, .2);
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.AttributeFormat li {
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  margin: 5px 0;
  transition: .5s;
  border-radius: 20px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
}

.AttributeFormat li:nth-child(1) {
  background-color: rgba(201, 201, 201, 0.4);
}

.AttributeFormat li:nth-child(2) {
  background-color: rgba(201, 201, 201, 0.3);
}

.AttributeFormat .AttributeList:hover {
  transform: scale(1.04);
  text-decoration: underline;
}

.AttributeSubList:hover {
  transform: scale(1.04);
}

.StyleOne {
  margin-left: 128px;
}

#StyleOneHeading {
  font-family: Arial;
  float: right;
  list-style: none;
  cursor: pointer;
}

.StyleTwo {
  margin-left: 110px;
  padding-right: 100px;
}

#StyleTwoHeading {
  font-family: Arial;
  float: right;
  list-style: none;
  cursor: pointer;
}

/* 统一控制所有details的展开收起规则 */
details {
  transition: height 0.4s ease;
  overflow: hidden;
  width: 100%;
}
details:not([open]) {
  height: 37px;
}
details[open] {
  height: auto;
}
/* 清除浮动，避免父容器高度塌陷 */
details::after {
  content: "";
  display: block;
  clear: both;
}
/* 摘要栏单独设置布局，保证对齐效果 */
details > summary {
  display: flex;
  align-items: center;
  min-height: 37px;
  list-style: none;
  cursor: pointer;
  justify-content: flex-end;
}

.DropDown1>summary {
  justify-content: flex-start;
  margin-left: 274px;
}

最终效果 #

• 所有层级子列表收起时，父容器保持初始紧凑高度，和原有视觉效果一致
• 任意层级子列表展开时，所有上级父容器会自动撑开高度，完整展示所有内容，无裁切
• 原有的展开收起过渡动画、hover缩放交互效果全部保留
• 全程无需引入JavaScript，纯CSS即可实现

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