Parent with display: "flex", flexDirection: "column", and resizable element height: "number in percent"

[Bouncue]

Please take a look and help me how to make resize bottom work:

CodeSanbox

158 Can't resize height if it's given in percents

[krisfrenette]

I am seeing the exact same issue. Is there an update on this?

[lc-101]

I would also be interested in a solution for this issue.

[Cwl100]

Bump... seeing this issue too

[xQsme]

Simple workaround: Define the component has having a px size then on the components's did mount function set it to a percentage:

componentDidMount() {
    document.getElementById('content').style.height = '30%';
}
...
render() {
    return (
        <Resizable
            className="content"
            id="content"
            onResize={this.onResize}
            defaultSize={{
                height: '300px',
            }}
...

[blshort43]

Simple workaround: Define the component has having a px size then on the components's did mount function set it to a percentage:

componentDidMount() {
    document.getElementById('content').style.height = '30%';
}
...
render() {
    return (
        <Resizable
            className="content"
            id="content"
            onResize={this.onResize}
            defaultSize={{
                height: '300px',
            }}
...

Thanks xQsme!! Glad I found this. I was messing with the dang thing for hours thinking I was doing something wrong.

[bfintal]

Another workaround is to render a <style> tag with the percentage height in the height style, and show it onResize and remove it onResizeStop

[MrKou47]

Another workaround is to render a <style> tag with the percentage height in the height style, and show it onResize and remove it onResizeStop

Could you please provide a demonstrate?

[aitella]

seeing this issue too and workaround with componentDidMount is not an option for ma as well as do not use display: flex on a parent.