javascript - 防止 flex 元素中的文本区域和镜像内容随内容动态扩展

Question

我试图阻止从嵌套文本区域镜像文本的 flex 元素增长，但我希望它最初占用空间。有没有办法用 flexbox 做到这一点，还是我应该改用网格？

包含文本区域的卡片不应该随其内容一起增长。这只会增长，因为下面的元素反射(reflect)了它的内容。我试过 overflow: scroll，但没有用。

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 class="section">
  <div class="card-holder">
    <div class="card">
      <div class="widget vertical">
        <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 class="glass card">
      More stuff here too
    </div>
  </div>
</div>

有个类似的问题here ，但唯一的答案是不合适。 This答案也不起作用。

Answer 1

卡上的 flex-grow 属性导致了它。在这种情况下，您似乎只是将 flex 作为一种方便的方法来使用，以便左侧和右侧始终均匀地填充空间并保持居中。

您可以将 flex-grow: 2; 替换为 width: 100%; 以获得相同的效果。

.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 class="section">
    <div class="card-holder">
        <div class="card">
            <div class="widget vertical">
                <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 class="glass card">
            More stuff here too
        </div>
    </div>
</div>