CSS resize属性与软文环绕一起使用时的行为

pdkcd3nj 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(109)

我目前正在用ReactJS和TailwindCSS做一个项目，我正在做一个可调整大小的文本区域的“网格”，除了当我调整屏幕右侧的任何元素的大小时，行为几乎是我想要的。这导致它由于flex-wrap而中断到下一行，然后考虑到文本区域和鼠标位置不同，重新计算我正在做的大小调整比以前（这就是问题所在）。
我想知道是否有可能使它的工作方式，我去，将是真正有益的任何提示或变通办法。

<div class="container">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</div>

.container{
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

textarea {
  resize: both;
  height: 200px;
  width: 250px;
  max-height: 400px;
  max-width: 550px;
}

下面是一个Codepen示例（用HTML和CSS编写）。
这是一个图片，说明了文本区域，而调整大小

这是当调整大小超过伸缩限制并发生换行时发生的情况

css

来源：https://stackoverflow.com/questions/75366587/css-resize-property-behavior-when-used-with-flex-wrap

2条答案

按热度按时间

bvuwiixz1#

这就是你想做吗？

<div class="up_container">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</div>
<div class="down_container">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</div>

.up_container,
.down_container {
  min-height: 50vh;
  background-color: lightgray;
  display: flex;
  flex-direction:row;
  gap: 10px;
}

textarea {
  resize: both;
  height: 200px;
  width: 250px;
  max-height: 400px;
  max-width: 550px;
}

赞(0）回复(0）举报 2023-02-10

ct2axkht2#

你必须定义容器的宽度和文本区域的最小高度。我想这就是你想要的？

.container{
  width:200vh;
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

textarea {
  resize: both;
  min-height: 200px;
  width: 250px;
  max-height: 400px;
  max-width: 550px;
}

赞(0）回复(0）举报 2023-02-10

我来回答

CSS resize属性与软文环绕一起使用时的行为

2条答案

相关问题

热门标签

最新问答