Code Block Styling Escapes Parent

Page with issue: https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart

I think there were some recent CSS changes, and they might have caused this:

I am going to open this up to first timers, as it should be a small change to a code element within the #description element.

An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.

If you would like to contribute, and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/

If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum

[ahmadabdolsaheb]

@ShaunSHamilton, @NinjaInShade Thanks for the correction. I meant horizontally and updated the comment accordingly.

@PatrickFranz, that is a really good point and I see other tech-ed sites are doing it such as the following:

The issue is that wrapping would lead to incorrect syntax in some instances. As seen above the one line comment is a multi line comment due to wrapping.

I think stack overflow handles it pretty well.

So we would need scroll horizontally and style the scroller to make it obvious that the code is scrollable(on mac) and we don’t get windows default scrollers.

[ShaunSHamilton]

It should scroll vertically instead of wrapping similar to https://www.freecodecamp.org/learn/scientific-computing-with-python/python-for-everybody/dictionaries-common-applications

@ahmadabdolsaheb I do not see it scrolling vertically? I see it scrolling horizontally.