Al final he conseguido solucionarlo, simplemente hay que trabajar el alineamiento de los elementos en vez de el tamaño de estos.
finalmenteFinalmente añadí a la clase .A
un align-content: flex-start;
para que subiera todo arriba
Me ha sido muy útil este grid cheatshet
main {
display: flex;
flex-direction:row;
height: 500px;
background: tomato;
}
aside {
height: 100%;
width: 100%;
margin: 0;
padding: 1rem;
}
.A {
height: auto;
display: grid;
align-content: flex-start; /* este es el añadido*/
}
.B {
display: grid;
/* aqui tambien funcionaria */
/* align-content: flex-start; */
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>