React virtualized Autosizer for flexbox

AutosizerFlex.jsx

// @flow
import * as React from 'react';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';

/** What is this?
 * It is an extension of react virtualized AutoSizer to manage flexbox layouts:
 * we want the component to be a growing and shrinking element inside a flex container
 * but we don't want it to impact its parent size.
 *
 * NB: the props are the one of AutoSizer. Everything is the same, except that it
 * works as expected for flexbox growing layouts.
 *
 ** How does it CSS works?
 * It's a bit tricky:
 * it should grow to occupy the space available, continue to grow
 * if the parent size increases, and also reduce its size when the
 * parent size decreases.
 *
 * - to watch for the parent size variations we use the Autosizer component.
 * - to prevent the graph size to impact the parent size: see the autosizer doc:
 *   https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md
 *   The idea is that we want the parent to ignore its children:
 *   this is done with the couple <div relative><div absolute>children</div></div>
 *   Absolute item are not taken into account in the parent size.
 */

/** Use example:
const HOCDimensionChart = (props) => (
    <AutosizerFlex>
        {(sizeProps) => <Component {...props} {...sizeProps} />}
    </AutosizerFlex>
);
*/

const AutosizerFlex = ({ children }: { children: any => React.Node }) => (
    <div style={{ flex: '1 1 auto' }} className="_autosizer_parent_div_flex">
        <AutoSizer>
            {sizeProps => (
                <div
                    width={sizeProps.width}
                    height={sizeProps.height}
                    style={{
                        width: '100%',
                        height: '100%',
                        position: 'absolute',
                        // border: 'solid', useful for debugging
                    }}
                    className="_autosizer_child_div"
                >
                    {children(sizeProps)}
                </div>
            )}
        </AutoSizer>
    </div>
);
export default AutosizerFlex;