The issue is when it is viewed using landscape, it will be messed like Britney, as the bookshelf will not resize in height to match the shortened screen. If you look at my codepen above, I added @media (orientation: landscape) to remove the arrows and topic, as well as adding left/right margins as a quick-fix. But if you keep shrinking the browser in height, the shelf won't adjust so it will be messed again.

How can I make the shelf automatically adjust to fit the screen? (note that it is inside a flexbox, fixed to fit 5 cells in a row, flex: 1 1 20%).