在 flexbox 列中换行时，textarea 和 input 的宽度不同

Question

我尝试通过使用包装的 flexbox 将 texarea 包装到“第二列”中来设置多列联系表单。我希望 textarea 与文本输入的宽度相同。实际上，文本输入（第一列）比文本区域（第二列）宽。在我在 codepen 上创建的示例中，不同之处在于，例如12 像素。

在下面的示例中，文本区域比字段集宽。在这个例子中，texarea（和提交按钮）比文本输入宽 10px，分别是字段集。为什么一个元素被包裹在 flexbox 中时比另一个更宽？

在代码中单个元素不能高于整个弹性盒的max-height。

* {
  box-sizing: border-box;
}

form {
  display: flex;
  flex-flow: column wrap;
  max-height: 116px;
}

input[type=text] {
  min-width: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  margin-bottom: 1em;
  display: block;
  width: 100%
}

fieldset {
  padding: 0;
  margin: 0;
}

textarea {
  min-height: 50px;
  max-height: 84px;
  min-width: 0;
  resize: vertical;
}


textarea, input[type="submit"] {
  padding: 0;
  margin: 0;
}

<form action="/doit" method="post">
    <fieldset>
        <input type="text" value="Text">
        <input type="text" value="Text">
        <input type="text" value="Text">
        <input type="text" value="Text">
    </fieldset>
    <textarea>I am wider than the fieldset.</textarea>
    <input type="submit" />
</form>

我在 Safari (Mojave) 和 Chrome 85 中尝试过。

谁能告诉我是什么导致了这种行为？

Answer 1

问题仍然存在于您的代码中。您已将form 的max-height 设置为116px（这次）。 input 元素和textarea 的高度之和肯定会比116px 增长更多，因为你的flex-wrap 是wrap，它会变成一行。所以你不应该期望它们的宽度相等。

如果您希望文本输入大小相等且彼此相邻，则必须使用flex-direction: row。您的代码可能类似于：

* {
  box-sizing: border-box;
}

form {
  display: flex;
  flex-flow: row wrap;
  
}

input[type=text] {
  min-width: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  margin-bottom: 1em;
  display: block;
  width: 100%
}

fieldset {
  flex:1;
  padding: 0;
  margin: 0;
}

.textarea {
  min-height: 50px;
  max-height: 84px;
  min-width: 0;
  resize: vertical;
}
.submit{
  align-self:center;
}

textarea, input[type="submit"] {
  padding: 0;
  margin: 0;
}

div{
  flex:1;
  display:flex;
  flex-direction:column;
}

<form action="/doit" method="post">
    <fieldset>
        <input type="text" value="Text">
        <input type="text" value="Text">
        <input type="text" value="Text">
        <input type="text" value="Text">
    </fieldset>
    <div >
      <textarea class="textarea">I am wider than the fieldset.</textarea>
      <input class="submit" type="submit" />
    </div>
</form>

请注意，我已将您的 textarea 和按钮包装在 <div> 中，使其成为 form 元素的子元素，并给它一个 flex:1。然后将 <div> 本身设为垂直弹性框。