Prevent textarea and mirrored content in a flex element from expanding dynamically with content-CodePudding

I am attempting to prevent a flex element that mirrors text from a nested textarea from growing, but I want it to originally take up space. Is there a way to do this with flexbox, or should I switch to using grid?

The card holding the text area is not supposed to be growing with its content. This only grows because the element below mirrors its content. I have tried overflow: scroll, but to no avail.

let text = document.getElementById("text");
let copy = document.getElementById("copy");
text.addEventListener("input", function(event){
  copy.textContent = event.target.value;
});

.card-holder {
  display: flex;
  
  justify-content: center;
  align-items: stretch;
  
  margin: 10px;
  
  gap: 10px;
}
.card {
  background-color: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;

  padding: 10px;

  flex-grow: 2;
}
.widget {
  display: flex;
  
  justify-content: flex-start;
  align-items: stretch;

  gap: 10px;
}
.widget.vertical {
  flex-direction: column;
}

textarea {
  resize: none;
  
  padding: 10px;
}

#copy {
  padding: 10px 10px 10px 10px;
  
  background: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  
  overflow: scroll;
}

<div >
  <div >
    <div >
      <div >
        <textarea id="text" rows="10" columns="5" placeholder="Insert a large amount of text here"></textarea>
        <div id="copy">
          I'll grow too
        </div>
      </div>
    </div>

    <div >
      More stuff here too
    </div>
  </div>
</div>

There's a similar question here, but the only answer is not suitable. This answer also does not work.

CodePudding user response：

The flex-grow property on card is causing it. In this case, it appears that you are only using flex as a convenience method to make it so that the left and right side always fill the space equally and remain centered.

You can replace flex-grow: 2; with width: 100%; for the same effect.

.card {
  background-color: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

let text = document.getElementById("text");
let copy = document.getElementById("copy");
text.addEventListener("input", function(event){
  copy.textContent = event.target.value;
});

.card-holder {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 10px;
  gap: 10px;
}

.card {
  background-color: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

.widget {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

.widget.vertical {
  flex-direction: column;
}

textarea {
  resize: none;
  padding: 10px;
}

#copy {
  padding: 10px 10px 10px 10px;
  background: #EEE;
  border: solid 1px #DDD;
  border-radius: 4px;
  overflow: scroll;
}

<div >
    <div >
        <div >
            <div >
                <textarea id="text" rows="10" columns="5" placeholder="Insert a large amount of text here"></textarea>
                <div id="copy">
                    I'll grow too
                </div>
            </div>
        </div>
        <div >
            More stuff here too
        </div>
    </div>
</div>