width: max-content not working in firefox with blueprintjs

i have the following codesandbox, which mirrors a private project in which i have a list of recordings and use blueprintjs to display this list.
Notice i have set width: max-content to the list, however in firefox the recording number goes to a new line. I then use white-space: nowrap to force the desired behavior. However it does not quite solve the issue. the radio buttons now overlap with the recording+number.

1. on both chrome and firefox, white-space is set to normal by default. Why do they behave differently?
2. how do i solve the issue of max-content not working in firefox?

codesandbox: https://codesandbox.io/s/strange-gwen-on3j16?file=/src/app.css
Was this page helpful?