Fix wrong width in Firefox

[benoittgt]

As mention in a lobster's comment : https://lobste.rs/s/ehc9li/how_i_reduced_my_db_server_load_by_80#c_3tknvn

Articles are not properly displayed on Firefox. Article's width go outside the screen:

I'm very bad at CSS but it seems this change fix the issue:

Thanks for all the very good blogposts.

[schneems]

Awesome! Thanks!

[schneems]

Awesome! Thanks!

[schneems]

Curious, do you know why this fix was required? I have some other flexbox stuff, like the email signup box at the bottom, is that broken too?

[schneems]

Curious, do you know why this fix was required? I have some other flexbox stuff, like the email signup box at the bottom, is that broken too?

[schneems]

Also that logo looks too big in firefox, guess i need to go download some new browsers.

[schneems]

Also that logo looks too big in firefox, guess i need to go download some new browsers.

[benoittgt]

It seems you find a way to fix the big logo on firefox (f5f6cb6). I don't have a specific answer for flex param that behaves differently between Firefox and Chrome. I will ask tomorrow to my coworkers about this. 😉

[benoittgt]

It seems you find a way to fix the big logo on firefox (f5f6cb6). I don't have a specific answer for flex param that behaves differently between Firefox and Chrome. I will ask tomorrow to my coworkers about this. 😉

[Freddy03h]

Set flex-basis to auto has an impact because the width is set to 75% (a magical number that doesn't solve the issue for all the viewport widths : try 780 to 1000px and there is still a scroll bar for the X axis)

To prevent the content to dictate the width of div.content there are two solutions : min-width: 0% or overflow-x: hidden

Before, we used to do flex-grow: 0% to shrink the content but it was a bug and Firefox always does the right things according to specs : https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

[Freddy03h]

Set flex-basis to auto has an impact because the width is set to 75% (a magical number that doesn't solve the issue for all the viewport widths : try 780 to 1000px and there is still a scroll bar for the X axis)

To prevent the content to dictate the width of div.content there are two solutions : min-width: 0% or overflow-x: hidden

Before, we used to do flex-grow: 0% to shrink the content but it was a bug and Firefox always does the right things according to specs : https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored

[Freddy03h]

And by the way, no need to set flex: 1 on div.sidebar with min-width: 14rem; max-width: 14rem. Delete the flex and use width.
And so you can use a value to 1 instead of 2 for the flex-grow of div.content.

[Freddy03h]

And by the way, no need to set flex: 1 on div.sidebar with min-width: 14rem; max-width: 14rem. Delete the flex and use width.
And so you can use a value to 1 instead of 2 for the flex-grow of div.content.