Scroll doesn't show the whole list of items

Question

I have a component with fixed width and height. I need to show a list of items in it. I used overflow: scroll; but it doesn't show the whole list! For instance, if I have 10 items, it doesn't show items 1,2 and maybe half of 3! I tried all things i found online, such as adding padding, height, or change it to overflow: auto; but neither worked!

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;
  }
}

Component:

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);

Can you provide a full example? What is your html structure? — Tom Esposito, Oct 11 '19 at 15:33
I don't see a fiddle added. Please post the RENDERED HTML and CSS output in the question. While the component and SCSS is great, it's way easier for us to help when you supply the rendered output so we can see what you're actually working with. Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — disinfor, Oct 11 '19 at 15:45
@disinfor before I do that, as it takes me a long time and might need to get permission from team-lead, can you please provide me with some idea what could be wrong that scroll doesn't show the whole list? — ILoveReactAndNode, Oct 11 '19 at 15:53
No, because we can't see your HTML. I have no idea what your rendered code looks like - what does `renderCartItem(cartItems)` output? Why would you need your team-lead's permission? You don't have to post any code that gives details away - change the text to something generic. We need to see the HTML. View source on your page, copy everything in the from the `return` in your component and then update the markup so you don't have any identifying information. — disinfor, Oct 11 '19 at 16:13

score 0 · Answer 1 · answered Oct 11 '19 at 16:26

0

ok, figured it out, that flex-direction: column; in .cart-items messed up with the scroller!! I don't know why yet so if anyone knows why that makes scroll not showing all the list please comment it below, thanks :)

answered Oct 11 '19 at 16:26

ILoveReactAndNode

281
5
16

Does it still happen if you do `justify-content: flex-start;` instead of center in `.cart-items` ? – Pierre-Yves Legeay Oct 11 '19 at 21:01
@Pierre-Yves PERFECT :) no it doesn't happen anymore, thanks please post it as an answer with detail that way that happens – ILoveReactAndNode Oct 12 '19 at 16:03
it was just a idea at the time. Thought flex centering could mess things up with overflowing content ;) See [this post](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) for an actual answer – Pierre-Yves Legeay Oct 12 '19 at 20:48

Scroll doesn't show the whole list of items

1 Answers1