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

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

滚动不显示整个项目列表

1 个答案: