HTML Flexbox container cannot automatically adjust its width in Firefox [duplicate]

I have the following HTML layout:

.top-container {  display: flex;  flex-direction: row;  gap: 20px;}.content-container {  display: flex;  flex-direction: column;  height: 500px;  flex-wrap: wrap;  border: 2px solid black;}.content {  width: 100px;  height: 100px;  background-color: yellow;  border: 2px solid blue;  margin: 10px;}

<div class="top-container"><div class="content-container"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div><div class="content">6</div><div class="content">7</div><div class="content">8</div></div><div class="content-container"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div><div class="content">6</div><div class="content">7</div><div class="content">8</div></div></div>

In Chrome, Brave, Edge, and Opera, it looks normal, but not in Firefox. The width of the content containers does not adjust to the content in Firefox. Does anyone have an idea why this might be happening? I have the latest version of Firefox, and according to Can I use, it should work. I’ve found some other threads on this topic, but they didn’t help and are all several years old. There have likely been some changes since then. I hope someone knows the issue and can help me out.

An explanation of my layout: I have a top-level div (top-container) that arranges all its divs in a row. This div should take up as much horizontal space as needed. Then, I have a middle div (content-container). This should arrange all its divs in a column. If there is not enough vertical space, it should wrap to a new line and create a new column with the remaining space. This div can take up as much horizontal space as needed but should not grow vertically. Lastly, there are the content divs. These have a fixed size that should not change. Therefore, using flex:1 does not help, as it would cause them to shrink, which is not desired in this case.

Best regards

Firefox

Other Browsers

I’ve already tried setting a min-width and min-height because I read that it could be a workaround, but it didn’t work.