CSS Grid inside parent with absolute positioning issue

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>