Default code blocks render poorly on iOS/safari

[adamchester]

The 'pre' block inside the table seems to overflow incorrectly, as the screenshot shows.

[adamchester]

Same issue on OS X Yosemite:

[tpetricek]

If any CSS experts can come up with a better way of handling overflowing code, that would be great...

[matthid]

I just had a similar issue on my website and used the following "fix":

table.pre {
    table-layout: fixed;
    width: calc(100% - 50px); /* here I used 2* the margin from my parent container, that's why this solution is not really universal */
}

table.pre pre {
  /* Show scrollbar when size is too small */
  overflow: auto;
}

table.pre td.lines {
  /* Align on top such that line numbers are at the correct place when the scrollbar is shown */
  vertical-align: top;
}

I'm not really a css expert so I would feel more comfortable if someone can review/test this. Note that I used this on my website so I'm not sure how this would work out here as FSF is used on various places...