Small problem with flex-wrap

[Echtzeit]

Hi, I'm using this snippet to get rid of the scrolling:

Code:

@media all {
  .homePage .emby-scroller {
    margin-right: 0;
  }
  .homePage .emby-scrollbuttons {
    display: none;
  }
  .homePage .itemsContainer {
    flex-wrap: wrap;
  }
}

Here's the problem:

with the latest version of the Jellyfin Media Player (it worked with a previous version, it's also not working in Edge), this cuts off one item on the right hand side of each section, where with the default settings one more was displayed.

So the "Continue Watching" section for example has four instead of five items in a row, "Recently Added" eight instead of nine.


Why? But more importantly, I'd like five items per row again with no scrolling.

[Echtzeit]

I've made screenshots to illustrate the issue.

Here you can see five items in one row when flex wrap is disabled.

   

And in this picture you can see only four items in a row with flex wrap enabled, even though there is enough space for five.

   

[TheDreadPirate]

Did it behave differently before? The CSS you provided behaves identically in JMP 1.12 and in a Chromium browser.

I tried Firefox to ensure that this isn't a Chromium based issue, and it also behaves the same. Four items in a row, but obviously space for a 5th. I'm assuming there is some sort of margin that is not accounted for.

[Echtzeit]

I've made screenshots to illustrate the issue.

Here you can see five items in one row when flex wrap is disabled.



And in this picture you can see only four items in a row with flex wrap enabled, even though there is enough space for five.

Yes, there were five in a row. After one of the recent updates, I'm assuming the server, it changed. I'm using Edge and the Jellyfin Media Player for at least six months now and in both there were five in a row with this code.