How do I prevent `inline` element from overflowing while not wrapping?

Question

I have the following code:

html, body {
    max-width: 150px;
    overflow: auto;
}

body {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none;
}

code {
    white-space: nowrap;
    overflow: auto; /* Doesn't Do Anything */
}

<p>So as you can see, the <code>code element</code> breaks as I want it to</p>

<p>but this <code>"long" code element overflows</code></p>

I want the text inside p tag to wrap, whereas I don't want the text inside code to wrap, but I also don't want the code element to overflow, rather it's max-width to be 100% and after that I want it to be scrollable.

Answer 1

I ended up doing this instead:

p {
    overflow: auto;
}

it's simple & short, thus the final code looks like this:

html, body {
    max-width: 150px;
    overflow: auto;
}

body {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none;
}

code {
    white-space: nowrap;
}

p {
    overflow: auto;
}

<p>So as you can see, the <code>code element</code> breaks as I want it to</p>

<p>but this <code>"long" code element overflows</code></p>