Prevent Flex Grow Before The Content is Full

Question

How can we make the flex items' height grow only when the text in the second flex item is full of the text?

Someone pointed me to this link, but it's not working for me.

function addDummyText() {
  const span = document.getElementById("second-row-span");

  span.textContent = span.textContent + " Lorem ipsum dolor sit amet ";
}

html,
body {
    height: 100%;
}

.flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    height: 100%;
    }

.flex-item:nth-child(1) {
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    background-color: red;
    }

.flex-item:nth-child(2) {
    order: 0;
    flex: 2 1 auto;
    align-self: auto;
  background-color: blue;
    }

.flex-item:nth-child(3) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  background-color: grey;
    }

<div class="flex-container flex-container-style fixed-height">
  <div class="flex-item"><span contenteditable=""></span><span class="counter">1 <input type="button" onclick="addDummyText()" value="add text" /> </span></div>
  <div class="flex-item"><span contenteditable=""></span><span id="second-row-span" class="counter">2</span></div>
  <div class="flex-item"><span contenteditable=""></span><span class="counter">3</span></div>
</div>

Your question is not entirely clear as you have three `flex-item`. Which do you need to grow when the second is full? All of them, the second only or one of the other two? Don't comment here, but adjust your question, please. — Rene van der Lende, Jan 03 '23 at 15:41
@RenevanderLende the second row should grow but if the content of the flex item is full. is that possible? currently, its grow even when the content is not full — Wildan Muhlis, Jan 03 '23 at 16:03
For the blue div (2nd child), you need to use `flex-basis: 0` not `auto`. So, `flex: 2 1 0`. https://jsfiddle.net/k5efy40w/ — Michael Benjamin, Jan 03 '23 at 16:51
Thanks @MichaelBenjamin, could you explain why it's working? — Wildan Muhlis, Jan 04 '23 at 01:33
You're welcome, @WildanMuhlis. The explanation is in the duplicate. — Michael Benjamin, Jan 04 '23 at 20:15

Prevent Flex Grow Before The Content is Full

0 Answers0