html - 在 CSS 中使父级适应其子级的最大尺寸

Question

是否可以让父 div 将其高度调整为子级高度的最大值，将宽度调整为子级宽度的最大宽度？

* { box-sizing: content-box; }

.parent {
  position: relative;
  
  border: 2px solid blue;
  
  height: max-content;
  width: max-content;
}

.child-a {
  position: relative;
  background: rgba(255, 0, 0, 0.3);
  
  width: 135px;
  height: 100px;
  
  top: 0;
  left: 0;
}

.child-b {
  position: absolute;
  background: rgba(0, 255, 0, 0.3);
  
  width: 100px;
  height: 135px;
  
  top: 0;
  left: 0;
}

<div class='parent'>
  <div class='child-a' />
  <div class='child-b' />
</div>

我在上面的例子中尝试了位置、顶部、左侧属性的各种组合。

也许至少在一个维度上可以达到这种效果？

Answer 1

是的，没有 position:absolute 使用 CSS-Grid 并在同一个网格单元格中分层元素是可能的。

* {
  box-sizing: content-box;
}

.parent {
  position: relative;
  border: 2px solid blue;
  height: max-content;
  width: max-content;
  display: grid;
}

.child-a {
  position: relative;
  background: rgba(255, 0, 0, 0.3);
  width: 135px;
  height: 100px;
  grid-column: 1 / -1;
  grid-row: 1;
}

.child-b {
  background: rgba(0, 255, 0, 0.3);
  width: 100px;
  height: 135px;
  grid-column: 1 / -1;
  grid-row: 1
}

<div class='parent'>
  <div class='child-a'></div>
  <div class='child-b'></div>
</div>