-1

I have a parent div with two child divs. The 2nd child is set to flex-grow. This works great, unless text has wrapped within the first column. In this case, it leaves a big empty space. Why is that, and can it be fixed?

This is the result I would Expect:
enter image description here

This is what is actually happening: 

body {
  font-family: sans-serif;
}

.parent {
  display: flex;
  max-width: 225px;
  border: 1px solid green;
  padding: 3px;
}

.parent > div {
    border: 1px solid red;
    pading: 3px;
    padding: 2px;
  }

.child2 {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
<div class="parent">
  <div class="child1">
  Short
  </div>
  <div class="child2">
  +
  </div>
</div>

<div class="parent">
  <div class="child1">
  Long NamedItem Thingamagig AnotherBigLong WordHere1234
  </div>
  <div class="child2">
  +
  </div>
</div>

<br>

Why is this space here ↑
kthornbloom
  • 3,660
  • 2
  • 31
  • 46

1 Answers1

1

Because you have a long string. Add word-break: break-all to .parent > div and you'll understand what is happening.

You'll want to tweak .child1 with :

flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;

or maybe

flex-grow: 0;
flex-shrink: 0;
flex-basis: 80%;

(I put this syntax because it works better with IE)

mttetc
  • 711
  • 5
  • 12
  • Thanks for the reply. My apologies if I didn't explain the expected result very well. I've updated my question. I understand it's due a long string, but normally when text wraps the parent element is not expanded as if `break-all` was being applied. The answer you suggested unfortunately breaks the layout of the first instance in my example. – kthornbloom Aug 20 '20 at 23:07