Hallo!
Erstmal danke für die bisherige Hilfe, die ich als stiller Mitleser hier schon bekommen habe 
Nun habe ich aber ein Problem, dass eine Anmeldung erforderte, da ich keine passende Lösung finden konnte.
Ich habe eine Sidebar, welche per CSS grid in 3 Sektionen unterteilt ist
Titel
Gallery
Button
Titel und Button sollen jeweils 1fr in der Höhe einnehmen, Gallery soll den restlichen Platz ausfüllen.
Gleichzeitig soll Gallery aber nicht mitwachsen, wenn der Content größer wird, sondern eine Scrollleiste zeigen.
Hier ist mein Quellecode
Code
#designerWrapper #sidebar {
grid-area: sb;
display: grid;
grid-gap: 18px;
background: #fff;
border-radius: 1px;
padding: 12px;
height: 100%;
}
#designerWrapper #sidebar .editBox {
grid-template-columns: 1fr;
grid-auto-rows: 1fr auto 1fr;
grid-template-areas:
"t"
"f"
"b";
max-height: 100%;
}
#designerWrapper #sidebar .editBox p.title {
grid-area: t;
font-size: 1.5rem;
}
#designerWrapper #sidebar .editBox .ghostButton {
margin: 0;
padding: 9px 3px;
}
#designerWrapper #sidebar .editBox form {
grid-area: f;
}
#designerWrapper #sidebar .editBox form .imgWrapper {
max-height: 100%;
overflow-y: scroll;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(30px, auto);
grid-gap: 9px;
padding-right: 9px;
}
#designerWrapper #sidebar .editBox form .imgWrapper img {
margin: 0;
border: 3px solid #fff;
}
#designerWrapper #sidebar .editBox form .imgWrapper img.active {
border-color: #8bc34a;
}
#designerWrapper #sidebar .editBox .button {
grid-area: b;
}
<div id="sidebar">
<div class="editBox">
<p class="title">Collage auswählen</p>
<form>
<div class="imgWrapper">
<img class="active" src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-1.jpg"}" lt="Test">
<img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-2.jpg"}" alt="Test">
<img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-4.jpg"}" alt="Test">
<img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-5.jpg"}" alt="Test">
<img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-6.jpg"}" alt="Test">
<img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-7.jpg"}" alt="Test">
<img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-8.jpg"}" alt="Test">
</div>
</form>
<a href="#" class="ghostButton maxWidth">
<span class="icon-plus-circle"> Fotos hochladen</span>
</a>
</div>
</div>Vergebe ich .imgWrapper eine Pixelhöhe funktioniert es. Hätte es aber gerne dynamisch.
Vielleicht habt ihr ja eine Idee. Danke im Voraus!