Setting a code tag to inline-flex in CSS causes the code containers to expand dramatically in height. And changing height directly breaks the code

Here is a screenshot that shows what I have now display:inline, and what happens when I set display:inline-flex:

To fix the problem, I tried adding height:16px to bring the height back down, but it breaks really long code elements:

Here is my relevant HTML:

<div id="rendered-md"><h1 id="expressions">Expressions</h1><h2 id="file-and-path">File and Path</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet magna <code class="inline-code"            spellcheck="false">consequat</code> odio euismod, vel ornare purus posuere. In in condimentum justo. Etiam        ultrices augue in est facilisis, eu condimentum leo ultricies. Nam laoreet felis in sollicitudin tempus. Nulla        ac fermentum augue. <code class="inline-code" spellcheck="false">Donec id ullamcorper dui</code>. Phasellus        rhoncus, tortor in rutrum consectetur, lacus nunc egestas risus, eu tempus risus est sit amet urna. Quisque sit        amet lacus vulputate, interdum magna vel, iaculis sapien.</p><table class="jop-noMdConv mce-item-table" data-mce-selected="1"><thead class="jop-noMdConv"><tr class="jop-noMdConv"><th class="jop-noMdConv">Name</th><th class="jop-noMdConv">Expression</th><th class="jop-noMdConv">Matches</th><th class="jop-noMdConv">Description</th></tr></thead><tbody class="jop-noMdConv"><tr class="jop-noMdConv"><td class="jop-noMdConv">Match image files.</td><td class="jop-noMdConv"><code class="inline-code jop-noMdConv" spellcheck="false"                        data-mce-selected="inline-boundary">$rePattern = "^.+\.(svg|jpg|jpeg|png|webp|tif|tiff|bmp|gif)$"</code></td><td class="jop-noMdConv"><p><code class="inline-code jop-noMdConv"                            spellcheck="false">C:\Image Testing\2993684_64px.png</code><br class="jop-noMdConv"><code                            class="inline-code jop-noMdConv"                            spellcheck="false">C:\Image Testing\Pinterest Alt.svg</code><br class="jop-noMdConv"><code                            class="inline-code jop-noMdConv" spellcheck="false">C:\Image Testing\ICON1000.jpg</code><br                            class="jop-noMdConv"><code class="inline-code jop-noMdConv"                            spellcheck="false">C:\Image Testing\google.webp</code><br class="jop-noMdConv"><strong                            class="jop-noMdConv">Does not match:</strong><br class="jop-noMdConv"><code                            class="inline-code jop-noMdConv" spellcheck="false">C:\Image Testing\google.txt</code></p><div class="joplin-editable jop-noMdConv" contenteditable="false"><pre class="hljs jop-noMdConv"><code class="jop-noMdConv">TEST</code></pre></div></td><td class="jop-noMdConv"><strong class="jop-noMdConv">Matches any file path with an image                        extension.</strong></td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv">Match File Extension</td><td class="jop-noMdConv"><code class="inline-code jop-noMdConv"                        spellcheck="false">$rePattern = "\.([^.]+)$"</code></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td><td class="jop-noMdConv"></td></tr></tbody></table></div>

Here is my working CSS with display:inline:

.inline-code,.mce-content-body code,#rendered-md table code {    border-width: 1px !important;    border-color: var(--color-neutral-200) !important;    background-color: var(--color-neutral-010) !important;    padding: var(--padding-inlinecode) !important;    border-radius: var(--border-radius-inlinecode) !important;    font-size: 13px !important;    font-family: var(--font-stack-input) !important;    margin-right: var(--margin-inlinecode-rightleft) !important;    margin-left: var(--margin-inlinecode-rightleft) !important;    color: var(--color-neutral-800) !important;    vertical-align: middle !important;}html .jop-tinymce #rendered-md .mce-item-table .inline-code {    line-height: 1.8725rem !important;    margin-left: 0rem !important;    margin-right: 0.1rem !important;    vertical-align: middle !important;    font-size: .75rem !important;    padding-top: 0.2605rem !important;    padding-bottom: 0.2605rem !important;    display: inline;}

Can anyone point me to the right way to fix this problem? I can't use flex, because the target element (class .inline-code) is inside of a table cell, and I can't change that.

Any help is greatly, greatly appreciated!