滚动不显示整个项目列表

Question

我有一个固定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);

Answer 1

好的，知道了，.cart-items 中的 flex-direction: column; 搞砸了滚动条！！我还不知道为什么，如果有人知道为什么滚动不显示所有列表，请在下面评论，谢谢:)