absolutely positioned pink div (modal_container) needs to move down as new items are added to input_container. Pink one should stay just beneath input_container.
Tried somethings by setting bottom in modal_container, but could not create a dynamic behaviour.
<!DOCTYPE html>
<html>
<head>
<title>My CSS Grid</title>
<style>
body {
color: #fff;
font-family: "Nunito Semibold";
text-align: center;
}
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
grid-template-areas:
"header header header"
"aside comp main";
}
.page > * {
background: #3bbced;
padding: 10px;
}
.header {
grid-area: header;
}
.comp {
grid-area: comp;
position: relative;
}
.input_cell {
display: grid;
position: relative;
}
.input_container {
flex: 1;
}
.modal_container {
flex: 1;
background-color: pink;
position: absolute;
width: 100%;
}
.input_item {
background-color: aqua;
}
.selected_container {
display: flex;
}
</style>
</head>
<body>
<div class="page">
<div class="comp">
<div class="input_cell">
<div class="input_container">
<div>Item 4</div>
<div>Item 4</div>
<div>Item 4</div>
<input class="input_item" />
</div>
<div class="modal_container">
<div>Item 1</div>
<div>Item 1</div>
<div>Item 1</div>
<div>Item 1</div>
<div>Item 1</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 2</div>
<div>Item 2</div>
<div>Item 2</div>
<div>Item 2</div>
<div>Item 2</div>
</div>
</div>
</div>
</div>
</body>
</html>