Looking to have a grid item expand to fill 100% of available space, but also scroll if it exceeds that space.
Here's an example scenario where I'm having trouble with the CSS line marked: '/* DOESN'T WORK */' when attempting to set overflow-y to scroll.
Specific requirements:
- The cart should take up 100% of its container.
- The checkout button should always be positioned at the bottom of the cart, regardless of the number of items.
- Cart items should fill up the available space, then overflow and scroll once the space is filled.
const item = `
<div class="cart__item">
T-Shirt
</div>
`;
const cartItems = document.getElementById("cart__items");
const renderItems = (n) => {
if (n < 1) {
cartItems.innerHTML = "cart emtpy";
return;
}
cartItems.innerHTML = item.repeat(n);
}
let numItems = 1;
const incItems = document.getElementById("inc_items");
incItems.addEventListener("click", () => {
numItems++;
renderItems(numItems);
});
const decItems = document.getElementById("dec_items");
decItems.addEventListener("click", () => {
if (numItems > 0) { numItems--; }
renderItems(numItems);
});
renderItems(numItems);.container {
height: 150px;
width: 500px;
background: pink;
}
.cart {
display: grid;
height: 100%;
grid-template-rows: 1fr max-content;
}
.cart__item {
outline: 2px solid red;
color: white;
background: blue;
}
.cart__items {
display: flex;
place-items: center;
flex-direction: column;
/* overflow-y: scroll; */ /* DOESN'T WORK */
outline: 2px solid black;
}<button id="inc_items">Inc Item</button>
<button id="dec_items">Dec Item</button>
<div class="container">
<div class="cart">
<div id="cart__items" class="cart__items"></div>
<div class="cart__checkout">
<button>Checkout</button>
</div>
</div>
</div>