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

我尝试通过使用包装的flexbox将texarea包装成“第二列”来设置多列联系人表单。我希望文本区域的宽度与文本输入的宽度相同。实际上，文本输入（第一列）比文本区域（第二列）宽。在我在codepen上创建的示例中，差异为12px

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

在代码中，单个元素不应高于整个flexbox的最大高度

*{
框大小：边框框；
}
形式{
显示器：flex；
柔性流：柱包裹；
最大高度：116px；
}
输入[类型=文本]{
最小宽度：0；
填充：0；
保证金：0；
最小宽度：0；
边缘底部：1米；
显示：块；
宽度：100%
}
字段集{
填充：0；
保证金：0；
}
文本区{
最小高度：50px；
最大高度：84px；
最小宽度：0；
调整大小：垂直；
}
text区域，输入[type=“submit”]{
填充：0；
保证金：0；
}

我比田野更宽。

您的代码中仍然存在问题。您已经将

表单的
最大高度设置为
116px
（这次）。
input
元素和
textarea
的高度之和肯定会增长超过
116px
，因为
flex wrap
是
wrap
它会变成一行。所以你不应该期望它们的宽度相等

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


*{
框大小：边框框；
}
形式{
显示器：flex；
柔性流：行换行；
}
输入[类型=文本]{
最小宽度：0；
填充：0；
保证金：0；
最小宽度：0；
边缘底部：1米；
显示：块；
宽度：100%
}
字段集{
弹性：1；
填充：0；
保证金：0；
}
.文本区{
最小高度：50px；
最大高度：84px；
最小宽度：0；
调整大小：垂直；
}
.提交{
自对准：居中；
}
text区域，输入[type=“submit”]{
填充：0；
保证金：0；
}
div{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}

我比田野更宽。
您是否尝试在
input
上使用
flex-grow:1
和
textarea
是否希望它们相邻？因为在你的代码笔里是这样的link@Awais据我所知，如果我不想实现不同的流增长行为，我不需要提供任何flex增长。对了，我已经试过了。Thx！：）@很抱歉打扰你。我现在的意思是伤害。因为我想在这里回答我的问题，有人告诉我应该更新我原来的问题，而不是回答我自己的问题。“后续问题”是指一个全新的问题？谢谢你的帮助。@ModusTollens是的，我已经注意到，问一个问题是一个完全不同的野兽，而不仅仅是阅读问题和相应的答案，几乎已经有十多年了。感谢您的支持。：）再次感谢你，奥米德，谢谢你帮助我。我知道我可以像你一样解决这个问题。但是a）我想节省额外的
div
b）我不明白为什么宽度不以相同的值结束。如果您使用两个
div
s进行尝试并将其包装，则得到的宽度完全相同。是否有任何解释说明为什么使用
textarea
与文本输入结合使用时会发生这种行为，但使用
divs
时不会发生这种行为？“我知道这是一个相当理论性的讨论，但我无法向自己解释。”马塞尔科赫我已经回答了为什么会发生这种情况！flexbox的最大高度设置为116px，其中的元素无法适应该高度，因此它们必须位于两列中，但不能保证它们的宽度大小相等。请注意，
s的宽度设置为100%，这在某种程度上是不明确的。因为它意味着元素父元素（flexbox）的全宽，但由于部分宽度被
占用，因此无法实现。我将为您提供一个有用的链接：