textarea max-width在flex项目中不起作用

Question

我正在使用max-width: 100%来包含textarea。但它似乎不适用于flex项目。我可以在textarea上指定一个属性，以确保最大值得到尊重吗？

textarea {
  display: block;
  margin-bottom: 1em;
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto;
}

来自See codepen.的

flexboxes Flex类。

Answer 1

您指定codepen中的文本区域应为4,000列宽，这就是造成问题的原因。

由于父级是一个弹性容器，它将增长以容纳子元素。

最简单的修复方法是：

• 为您的textarea设置px，vw或其他适当单位的最大宽度。
• 使用width代替max-width，并在父容器上指定max-width，而不是
• 覆盖父元素的默认min-width: auto，将其设置为任何其他值，即0或250
• 将列缩小为更合理的列，例如250 - 或省略它们并使用width代替