Why does a horizontal scrollbar appear in portrait mobile view with CSS Grid layout but not flexbox?

HTML & CSS
3

Due to the way grid works you need to specify the min-width otherwise it fits content as that’s the default for grid I believe.

e.g. add min-width:0 to that codepen and your pre will get scrollbars as required.

main {
  grid-area: main;
  padding: 0 1em;
  min-width:0;
}

More info here: