Textarea autoheight doesn't work inside flex

Question

I'm using Semantic UI React and theirTextarea has a autoHeight property that auto expands the text area as you create new lines. This stops working if the Textarea is wrapped by a Grid.Column which has a display: flex property.

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

Basically I wanted a text box that's vertically aligned and autoexpands as more lines are added but seems I can either autoexpand it or have it vertically aligned, haven't been able to get both.

Answer 1

As per my comment the css below, does work:

textarea {
  height: 100%;
}

I have open your sample code from code box and modified to look like this:

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

So I have removed autoHeight: cause it will generate an inline style of height: auto and added height: 100%.

That works, now as all textarea tags will have the same height you might want to add a minHeigh: 100px // or something to get the height you want.

Thanks