Angular cdk-virtual-scroll with wrap and responsiveness

Question

I am looking at the cdk-virtual-scroll and hoping I can use this in my existing application, where I have a view containing items, who's width varies depending on screen size (eg phone vs tablet etc)

Forking this example , I have a modified version here .

My modifications are on App/cdk-virtual-scroll-overview-example.css , where I have changed the css to contain the following..

.example-viewport {
      height: 200px;
      width: 90%;
      border: 1px solid black;
      display: flex;
      flex-direction:  row;
      flex-wrap:  wrap
    }

    .example-item {
      height: 50px;
      background: red;
      margin:0.5px;
      width: 33%
    }

      @media screen and (min-width: 360px)  {
       .example-item {
          width: 45%
         }
       }

So my aim here is have the items showing either 2 or 3 a row depending on the screen size. However, as can be seen, they do not seems to wrap at all...

I have used flex here (have I done this wrong?), but any css to get it working will do (perhaps flex grid, or other)

Is this possible using the cdk-virtual-scroll ?

Thanks in advance

Answer 1

You could workaround it by chunking your items according to the number you want per row and then within the virtual scroll add ngFor to iterate each chunk. Then you can display flex on chunk div.