I have a row of 5 columns, each holding a red box with some text. When the user shrinks the screen sideways, I want the container to shrink sideways, and I want the boxes to start overlapping each other, so that the text in the boxes are still fully visible.Not sure how to achieve this, I've tried changing the side margins of the boxes to negative but that doesn't seem to work too well.
.container { width: 100%; height: 100px; border: 1px solid brown; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: stretch;}.playerRow { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; display: flex; justify-content: space-around; justify-items: center; align-items: center; text-align: center; gap: 0.45em;}.playerBox { width: 150px; height: 100px; background-color: red; display: flex; justify-content: center; align-items: center;}.playerBox:nth-child(1),.playerBox:nth-child(3),.playerBox:nth-child(5){ align-items: flex-end;}<div class="container"><div class="playerRow"><div class="playerBox onTop">user 1 ahhahah</div><div class="playerBox onTop">user 2 ahhahah</div><div class="playerBox onTop">user 3 ahhahah</div><div class="playerBox onTop">user 4 ahhahah</div><div class="playerBox onTop">user 5 ahhahah</div></div></div>