CSS Grid inside parent with absolute positioning issue - html

Question

I am trying to achieve as many columns as it can fit in a row of a grid using auto-fill.
This is how the code works correctly.
.grid-container {
border: solid 1px green;
padding: 3px;
min-width: 400px;
max-width: 900px;
display: flex;
flex-basis: 900px;
flex-direction: column;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
grid-gap: 12px;
}
.item {
border: solid 1px red;
min-height: 80px;
}
<div class="drawer">
<div class="grid-container">
<div class="grid">
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
</div>
</div>
</div>
But I need the container drawer to have absolute positioning. If I set it to absolute positioning, the grid autofill stops working and the grid creates just one column without trying to fit more columns.
.grid-container {
border: solid 1px green;
padding: 3px;
min-width: 400px;
max-width: 900px;
display: flex;
flex-basis: 900px;
flex-direction: column;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
grid-gap: 12px;
}
.item {
border: solid 1px red;
min-height: 80px;
}
.drawer {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
<div class="drawer">
<div class="grid-container">
<div class="grid">
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
</div>
</div>
</div>
Why is this happening and how to make the grid work correctly?

Answer 1

The .drawer element has no definite width set.
If you add right: 0 or width: <anything> it will get a width and the grid has a horizontal dimension context to work with.
In your example above the width of the .grid is determined by the min-width of the .grid-container element
body {
/* needed fot this presentation on SE */
/* unclear of needed IRE */
position: relative;
}
.drawer {
position: absolute;
left: 0;
top: 0;
right: 0;
max-width: 100%;
}
.grid-container {
border: solid 1px green;
padding: 3px;
min-width: 400px;
max-width: 900px;
display: flex;
flex-basis: 900px;
flex-direction: column;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
grid-gap: 12px;
}
.item {
border: solid 1px red;
min-height: 80px;
}
<div class="drawer">
<div class="grid-container">
<div class="grid">
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
<div class="item">This is grid item</div>
</div>
</div>
</div>