如何避免文本元素改变父元素宽度，维持Grid布局1:1比例？

核心问题是Grid布局中1fr默认会根据内容的最小宽度（min-content）调整列宽，长文本会触发这个特性导致列比例失衡。可以通过以下方式解决：

• 修改Grid列定义，用minmax(0, 1fr)替代1fr，强制列的最小宽度为0，确保两列始终保持1:1比例
• 给<p>标签补充overflow: hidden属性，让文本省略效果正常生效
• 给Grid的直接子容器设置width: 100%，确保内部元素能继承确定的容器宽度

修改后的CSS代码：

.root {
  display: grid;
  /* 用minmax(0,1fr)限制列宽，避免被内容撑大 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; /* 可选，增加列间距提升可读性 */
}

p {
  text-overflow: ellipsis;
  text-wrap: none;
  white-space: nowrap;
  overflow: hidden; /* 补充该属性，让文本省略生效 */
}

.p1 {
  background-color: pink;
}

.p2 {
  background-color: yellow;
}

/* 确保子容器继承Grid列的宽度 */
.root > div {
  width: 100%;
}

HTML结构保持不变：

<html>
<head/>
<body>
  <div class="root">
    <div>
      <p class="p1"> Some very long text that changes parent element width random text </p>
      <Dropdown/>
    </div>
    <div>
      <p class="p2"> short text</p>
      <Dropdown/>
    </div>
  </div>
</body>
</html>

原理说明 #

• minmax(0, 1fr)：将Grid列的最小宽度设为0，最大宽度占剩余空间的1份，即使内容很长，列也不会超出分配的1:1比例
• overflow: hidden：这是text-overflow: ellipsis生效的必要条件，且该属性仅作用于<p>标签本身，不会影响父容器内的Dropdown组件，避免下拉菜单被隐藏

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