I can't get a grid that contains a scroll in one of its elements and that in turn the elements adjust.
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;
and grid-auto-row: min-content
it seems to work but in the first case the overflow stops working.
I played around a bit with the values between classes A and C.
I still don't understand where class B came from, so it has been removed.
The important thing is to know how to define height and max-height, both being used differently.
Now the last thing is to know if this is close to what you are looking for or not.
In the end I managed to solve it, you just have to work on the alignment of the elements instead of their size.
Finally I added to the class
.A
aalign-content: flex-start;
so that everything would go upThis grid cheatshet has been very useful to me