如何让孙子元素适配网格行祖父容器高度并实现隐藏

我有一个4行的Grid布局：

• 第一个子组件（child1）占据前3行、固定宽度并居左
• 第二个子组件（child2）填满第4行的整个宽度

我希望通过组件内的按钮实现孙子元素的隐藏功能，思路是让孙子元素占满网格项高度，同时父元素设置为fit-content。目前左侧组件的问题已解决，但底部组件还没实现预期效果。

原代码 #

JavaScript #

function hideShow(name) {
  var x = document.getElementById(name);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

CSS #

.parent{
  background: red;
  height:200px;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.child1 {
  position: relative;
  grid-row: span 3 / span 3;
  background: blue;
  
  width: fit-content;
}

.child2{
  position: relative;
  grid-row-start: 4;
  background: green;
}

#grandchild1 {
  height:90%;
  width: 100px;
  background: yellow;
}

#grandchild2 {
  height: 90%;
  width: 90%;
  background: orange;
}

.button1{
  position: absolute;
  top: 64px;
  right: 0;
  transform: translateX(50%);
}

.button2{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML #

<div class="parent">
  <div class="child1">
    <button class="button1" onclick="hideShow('grandchild1')">Hide</button>
   <div id="grandchild1"></div>
  </div>
  <div class="child2">
     <button class="button2" onclick="hideShow('grandchild2')">Hide</button>
    <div id="grandchild2"></div>
  </div>
</div>

底部组件（child2）的核心问题是父元素高度未自适应孙子元素，且百分比高度的参照关系不明确。调整以下几点即可实现预期效果：

1. 给child2添加height: fit-content，让它根据内部孙子元素的高度自动收缩/展开
2. 为child2设置display: flex，确保孙子元素的height:100%能正确参照父元素高度
3. 将grandchild2的高度改为100%，让它完全填充父元素空间
4. 可选：给child2添加少量内边距，避免按钮与内容贴边

修改后的完整代码 #

JavaScript #

function hideShow(name) {
  var x = document.getElementById(name);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

CSS #

.parent{
  background: red;
  height:200px;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.child1 {
  position: relative;
  grid-row: span 3 / span 3;
  background: blue;
  width: fit-content;
}

.child2{
  position: relative;
  grid-row-start: 4;
  background: green;
  height: fit-content; /* 让父元素高度随子元素自适应 */
  display: flex; /* 确保子元素高度百分比生效 */
  padding: 5px 0; /* 给按钮预留空间 */
}

#grandchild1 {
  height:90%;
  width: 100px;
  background: yellow;
}

#grandchild2 {
  height: 100%; /* 占满父元素高度 */
  width: 90%;
  background: orange;
  margin: 0 auto; /* 保持水平居中 */
}

.button1{
  position: absolute;
  top: 64px;
  right: 0;
  transform: translateX(50%);
}

.button2{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML #

<div class="parent">
  <div class="child1">
    <button class="button1" onclick="hideShow('grandchild1')">Hide</button>
   <div id="grandchild1"></div>
  </div>
  <div class="child2">
     <button class="button2" onclick="hideShow('grandchild2')">Hide</button>
    <div id="grandchild2"></div>
  </div>
</div>

关键说明 #

• child2设置height: fit-content后，隐藏grandchild2时，父元素会自动收缩高度，符合隐藏逻辑
• display: flex解决了百分比高度的参照问题，让grandchild2的100%高度能正确对应父元素的自适应高度

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