У меня есть компонент с фиксированными width и height. Мне нужно показать список предметов в нем. Я использовал overflow: scroll;, но он не показывает весь список! Например, если у меня есть 10 предметов, он не показывает предметы 1,2 и, возможно, половину из 3! Я перепробовал все, что нашел в Интернете, например, добавил padding, height или изменил его на overflow: auto;, но ни один из них не работал!
SCSS:
.cart-dropdown {
width: 300px;
height: 400px;
background-color: aqua;
position: absolute;
top: 60px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid black;
z-index: 10;
.cart-items {
padding:10px;
overflow: auto;
width: 100%;
height: 320px;
margin: 5px;
background-color: cornflowerblue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.button {
margin: auto;
}
}
Компонент:
const cartDropdown = ({cartItems}) => {
const renderCartItem = cartItems => {
return cartItems.map(item => <CartItem key={item.imageUrl} item={item} />);
};
return (
<div className="cart-dropdown">
<div className="cart-items">{renderCartItem(cartItems)}</div>
<div className="button">
<Button>GO TO CHECKOUT</Button>
</div>
</div>
);
};
const mapStateToProps = ({ cartStatus: { cartItems } }) => ({
cartItems
});
export default connect(mapStateToProps)(cartDropdown);