On JSFiddle, I have provided an example of my issue with flexbox. My goal is to make the left column adjust its width based on the content and break a line if the text is too long. Currently, it is taking up minimal space, causing layout issues.
The fiddle below shows two blocks demonstrating how it currently looks and how I want it to look (I have set fixed widths for visualization purposes, but I intend for it to be dynamic with flexbox).
I believe solving this should be straightforward, but I seem to be overthinking it. Any assistance would be greatly appreciated :)
.flex {
display: flex;
background: #333;
max-width: 380px;
}
.first {
flex: 0;
background: #666;
}
.second {
flex: 1;
background: #999;
}<p>Current state using flexbox approach</p>
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<br />
<div class="flex">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr />
<p>Desired outcome</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
<div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
<div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
<div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
<div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>