Question

我有两个元素，其中一个浮在左边，另一个浮在右边，其内容是textarea元素。它们的宽度设置为30％和60％。看起来还可以，但是当我调整textarea的大小时，父元素会以奇怪的方式调整大小。 Textarea超越了父级。

这是一个简单的例子：

<div class="wrapper">
  <div class="left">
    <label>Label</label>
  </div>

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

  <div style="clear: both;">
  </div>
</div>

.wrapper {
  border: 3px double gray;
  display: inline-block;  
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}

JSFiddle

这种奇怪行为的原因是什么，我该怎么做而不修改HTML代码就可以解决它？

Answer 1

解决方案：1

您可以将max-width: 100%设置为textarea，以使其不会超出div

.wrapper {
  border: 3px double gray;
  display: inline-block;  
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}
.right textarea {
  max-width: 100%;
}

<div class="wrapper">
  <div class="left">
    <label>Label</label>
  </div>

  <div class="right">
    <textarea></textarea>
  </div>
  
  <div style="clear: both;">
  </div>
</div>

解决方案：2

您可以将resize: none;设置为teaxtarea，以使其无法调整大小。您可以根据需要添加height中的width和textarea

.wrapper {
  border: 3px double gray;
  display: inline-block;  
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}
.right textarea {
  max-width: 100%;
  resize: none;
}

<div class="wrapper">
  <div class="left">
    <label>Label</label>
  </div>

  <div class="right">
    <textarea></textarea>
  </div>
  
  <div style="clear: both;">
  </div>
</div>

Answer 2

https://jsfiddle.net/0Lq3ks4g/50/

.wrapper {
  border: 3px double gray;
  min-width: 300px;
  overflow: visible;
  padding: 5px;
}

.left {
  float: left;
  text-align: right;
  width: 30%;
}

.right {
  float: right;
  width: 60%;
}

尝试从.wrapper中删除display：inline-block。然后，当textarea扩展时，父级也会扩展

父元素未正确调整子Textarea的大小

2 个答案: