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>

Answer 2

The comment told you correctly: in order to properly overflow the <code> tag, you need to give it a block internal structure. Also, don't forget about vertical alignment.

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

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

code {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: auto;
  vertical-align: bottom;
  color: red;
}

/* Only for example --> */ p { background-color: #fc08; overflow: auto; resize: both; }

<p>So as you can see, the <code>code element</code> breaks as I want it to but this <code>"long" code element overflows</code> Now it works!</p>

Run the snippet and resize the paragraph by grabbing the bottom right corner.