如何阻止相对定位div的文本内容溢出边界并避免重叠？

问题核心是.details容器未继承父容器的高度限制，导致Grid布局的行高随内容自动扩展，超出父容器max-height后，子元素的overflow-y: hidden无法生效，最终文本溢出重叠。

修复方案 #

给.details添加height: 100%，让Grid布局高度严格限制在父容器的max-height范围内，两行将平分父容器高度，子元素的溢出截断即可正常工作：

.parent {
  margin: 5px;
  max-height: 100px;
  max-width: 400px;
  background: pink;
}

.details {
  width: 100%;
  text-align: center;
  font-size: 14pt;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%; /* 新增：继承父容器高度 */
}

.detail1 {
  grid-row: 1;
  overflow-y: hidden;
}

.detail2 {
  grid-row: 2;
  overflow-y: hidden;
}

如果希望文本截断时显示省略号，可给子元素补充以下样式（可选）：

.detail1, .detail2 {
  white-space: nowrap;
  text-overflow: ellipsis;
}

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