如何让两个重叠的元素填充它们的父元素

Question

我需要2个元素(在演示中标记为#a和#b)来完全填充它们的父元素。我需要元素#a填充它的父元素(这很简单，我只需要将flex设置为1)，我需要元素#b位于#a的顶部，并且与#a的大小完全相同。如何使#b有相同的大小?如果我将宽度/高度设置为100%，#b将溢出。

body {
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
}
nav {
background-color: silver;
}
main {
flex: 1;
border: 5px solid green;
display: flex;
}
#a {
border: 1px solid aqua;
flex: 1;
}
#b {
position: absolute;
border: 1px dashed blue;
flex: 1;
}

<nav>sidebar of variable width</nav>
<main>
<div id="a">aaa</div>
<div id="b">bbb</div>
</main>

Answer 1

如果你将父元素(main)设置为position: relative，而#b设置为position: absolute，那么你应该能够根据main设置它的大小(在这种情况下是100%的宽度和高度)，并将其定位为顶部和左侧0。

body {
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
}
nav {
background-color: silver;
}
main {
flex: 1;
border: 5px solid green;
display: flex;
position: relative;
}
#a {
border: 1px solid aqua;
flex: 1;
}
#b {
position: absolute;
border: 1px dashed blue;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<nav>sidebar of variable width</nav>
<main>
<div id="a">aaa</div>
<div id="b">bbb</div>
</main>