Make flex item be the width of its text
<p>I want to have a layout with two columns, where the left column is some kind of sidebar. </p>

<p>Now I want to use some text in the sidebar that shouldn't wrap. </p>

<p>When I do so it causes some kind of overflow and then using <code>overflow:hidden</code> hides a good part of the text. </p>

<p>How can I modify the left column to use the width of the unwrapped text and the right column to use the remaining space without dropping <code>overflow:hidden</code>?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: flex;
}
#sidebar {
    border: 1px solid red;
    flex 1 auto;
    overflow: hidden;
}
#sidebar .column {
    white-space: nowrap;
}
#sidebar .column span {
    margin: 2px;
    padding: 2px;
    border: 1px solid green;
    display: inline-block;
}
#content {
    border: 1px solid black;
    flex: 1 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="sidebar"&gt;
        &lt;div class="column"&gt;
            &lt;span&gt;Howdy Cowboy, some text is missing here&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        Some funny content
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/8jjzpm7b/1/" rel="noreferrer"><strong>JSFIDDLE</strong></a></p>