No logro un grid que contenga un scroll en uno de sus elementos y que a su vez los elementos se ajusten.
main {
display: flex;
flex-direction:row;
height: 500px;
background: tomato;
}
aside {
height: 100%;
width: 100%;
margin: 0;
padding: 1rem;
}
.A {
height: auto;
display: grid;
}
.B {
display: grid;
overflow-y: auto;
}
.D {
overflow-y: auto;
}
.C {
padding: 10px;
background-color: #07f;
}
.E {
background-color: #eee;
padding: 10px;
}
<main>
<aside class="A">
<div class="B">
<div class="C">search</div>
<div class="D">
<div class="E">1</div>
<div class="E">2</div>
<div class="E">3</div>
<div class="E">4</div>
<div class="E">5</div>
<div class="E">6</div>
<div class="E">7</div>
<div class="E">8</div>
<div class="E">9</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
</div>
<div class="C">elemento que debe ajustarse al de arriba</div>
</div>
</aside>
<aside class="A">
<div class="B">
<div class="C">search</div>
<div class="D">
<div class="E">1</div>
<div class="E">2</div>
<div class="E">3</div>
<div class="E">4</div>
<div class="E">5</div>
</div>
<div class="C">elemento que debe ajustarse al de arriba</div>
</div>
</aside>
</main>
height: min-content;
y grid-auto-row: min-content
parece que funciona pero en el primer caso el overflow deja de funcionar.