1

I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it always takes as little space as possible, which results in breaking the layout.

I have a fiddle below, first you see two blocks with how it looks now, below you see 2 blocks how I want it to look like (I've defined fixed width for visual reasons, but I want it to be dynamically with flexbox, obviously).

I'm pretty sure I can do this easily but I can't see the wood for the trees. Any kind of help is highly appreciated :)

.flex {
  display: flex;
  background: #333;
  max-width: 380px;
}

.first {
  flex: 0;
  background: #666;
}

.second {
  flex: 1;
  background: #999;
}
<p>How it looks like with my 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>How it should look like</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>
Steven X
  • 394
  • 1
  • 3
  • 14

1 Answers1

1

Use white-space:nowrap on the second element so it does not collapse.

  .flex {
  display: flex;
  border: 1px solid green;
}

.first {
  background: lightblue;
  border: 1px solid grey;
}

.second {
  white-space: nowrap;
  background: lightgreen
}

.narrow {
  width: 50%;
<div class="flex">
  <div class="first">
    Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>
<hr/>


<div class="flex narrow">
  <div class="first">
    Here is my Dynamic Text Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thank you @Paulie_D it's almost what I want. But on your example, there is a space between "is" and "Next to Text" (a margin in the blue box) in the 2nd example with the longer text. Is there a way to get rid of it? (appears only on big screens with >1400px width / resolution) – Steven X Jan 14 '20 at 15:42
  • 1
    No, that's not possible...that's not the way the box-model works - https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap – Paulie_D Jan 14 '20 at 15:52
  • Thanks for the link and the information! I see that this is a limitation of CSS itself, not of flexbox. (Same issue with width: auto, inline-block, etc). – Steven X Jan 15 '20 at 09:09