reactjs - Textarea 自动高度在 flex 中不起作用

Question

我正在使用 Semantic UI React，他们的 Textarea 有一个 autoHeight 属性，可以在您创建新行时自动扩展文本区域。如果 Textarea 被具有 display: flex 属性的 Grid.Column 包裹，这将停止工作。

<Grid.Column style={{'display':'flex','flex-direction':'column', 'align-items': 'center', 'justify-content': 'center', width={6}>
    <TextArea autoHeight ></TextArea> 
</Grid.Column>

基本上，我想要一个垂直对齐的文本框，并随着添加更多行而自动扩展，但似乎我可以自动扩展它或使其垂直对齐，但无法同时获得这两者。

Answer 1

根据我的评论，下面的 css 确实有效:

textarea {
  height: 100%;
}

我已经从代码框中打开您的示例代码并修改为如下所示:

<TextArea
    name="itemTopic"
    defaultValue={comparison.a}
    rows={1}
    style={{
    fontSize: "20px",
    textAlign: "center",
    width: "100%",
    height: "100%"
  }}
/>

所以我删除了 autoHeight: 因为它将生成 height: auto 的内联样式并添加了 height: 100%。

这行得通，现在所有文本区域标签都具有相同的高度，您可能想要添加 minHeigh: 100px//或其他内容 以获得您想要的高度。

谢谢