1

So I have a flex container (spanning at full width) with two divs inside. The first one has a short text with a rather large font size, the other one longer text with a smaller font.

As the viewport shrinks, I'd like the first flex item to shrink and break on words until it can't anymore - and it does! But whenever a new line-break happens, there is extra space left at the end of the first inner div, and I just can't figure out how to make it go away. Here's the code:

.first {
  background: green;
  flex: 0 1 auto;
  font-size: 80px;
}

.second {
  background: red;
  flex: 1 1 auto;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
<div class="flex">
  <div class="first">
    TEXT WITH LARGE FONT
  </div>
  <div class="second">
    Nullam a leo odio. Suspendisse dapibus cursus sem, a congue erat viverra in. Nulla eget tortor vel risus auctor dictum tempor in urna. Nullam vestibulum vulputate elit. Mauris quis tortor varius, interdum nisl id, dignissim nulla.
  </div>
</div>

see illustration

enter image description here

Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
kbk
  • 19
  • 1

1 Answers1

0

That's just how flexbox works. It's going to scale the divs proportionally and at a steady rate, not just make the other one smaller as soon as it has room next to the text. You can see this same thing happening on your small text paragraph, but the effect is less noticeable because the font size is so small. Is text-align: right out of the question?

Riley Hemphill
  • 146
  • 5