Автоподогрев Textarea не работает внутри flex

Question

Я использую Semantic UI React и их текст имеет свойство autoHeight, которое автоматически расширяет текстовую область при создании новых строк. Это перестает работать, если Textarea обернут Grid.Column, который имеет свойство display: flex.

<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%,

Это работает, теперь, когда все теги textarea будут иметь одинаковую высоту, вы можете добавить minHeigh: 100px // or something чтобы получить высоту, которую вы хотите.

Спасибо