Flex div size and Tabulator table (React version)

Question

I am trying to control a Tabulator div's size based on flexbox css style (http://tabulator.info/). Inside a div with a given width/height, I want to have a field taking the space it needs, and have the Tabulator table fill the rest (vertically)

The following code works just right for text, but tables overflow the second div:

const columns = [
    { title: 'index', field: 'index', width: 80, formatter: 'textarea' },
    { title: 'text', field: 'text', width: 80, formatter: 'textarea' },
];

const data = [
    { index: 0, text: "A" },
    { index: 1, text: "B" },
    { index: 2, text: "C" },
    { index: 3, text: "D" }
]

...

<div
    style={{
        width: '400px',
        height: '150px',
        border: '3px solid red',
        padding: '5px',
        display: 'flex',
        flexFlow: 'column',
    }}
>
    <div
        style={{
            border: '3px solid lightblue',
        }}
    >
        Table:
    </div>
    <div
        style={{
            border: '3px solid green',
            flex: 1
        }}
    >
        <React15Tabulator
            data={data}
            columns={columns}
            layout={'fitColumns'}
            // options={options}
            index={'index'}
        />
    </div>
</div>

If you replace the React15Tabulator element with some simple text, the green outlined div fills the rest of the vertical space, as intended.

With the React15Tabulator table in place, not only does the table overflow the red outlined div, but also the green div itself gets stretched out.

Any way to force the green div to stick to the intended dimensions (using flex)?

Will59 Will59 · Accepted Answer · 2020-01-13T15:17:58

The answer boils down to an incomplete use of flex properties. The div containing the Tabulator element must have a relative position attribute, so children will compute their position/size based on it. The Tabulator element must be set to an absolute position, and 100% height.

Add to that removing the default tabulator margins and all displays nicely.

<div
    style={{
        width: '400px',
        height: '150px',
        border: '3px solid red',
        padding: '5px',
        display: 'flex',
        flexFlow: 'column',
    }}
>
    <div
        style={{
            border: '3px solid lightblue',
        }}
    >
        Table:
    </div>
    <div
        style={{
            border: '3px solid green',
            flex: 1,
            position: 'relative',       // <<< Wil condition child sizing
        }}
    >
        <React15Tabulator
            data={data}
            columns={columns}
            layout={'fitColumns'}
            // options={options}
            index={'index'}
            style={{
                margin: 0,               // remove default margins
                height: '100%',          // size to 100%
                position: 'absolute',    //   of green div's height
            }}
        />
    </div>
</div>

Flex div size and Tabulator table (React version)

1 Answers