main.responsive inline-size for hidden overflow does not work consistently across browsers.

[ciukstar]

Block elements within a .responsive main element that are set to hidden the overflow, and text-overflow set to ellipsis, appear differently in Chrome than in Firefox. In Chrome, the inline-size of main is set to -webkit-fill-available. In Firefox, the inline-size is set to -moz-available.

In fact, Chrome displays these elements as expected: the overflow is hidden and the text overflow is replaced with ellipsis.

And Firefox does not hide the overflow or replace the text overflow with ellipsis.

This is more of a problem on devices with narrow screens, such as mobile devices.

Thanks.

[ciukstar]

Just to show what worked for me. Perhaps this will help solve the problem.

@media only screen and (max-width: 600px)  {
    main {
        max-width: 100vw;
    }
}
@media only screen and (min-width: 601px) and (max-width: 992px)  {
    main {
        max-width: 90vw;
    }
}
@media only screen and (min-width: 993px)   {
    main {
        max-width: 80vw;
    }
}