Flex div 大小和 Tabulator table（React 版本）

Question

我正在尝试根据 flexbox css 样式 (http://tabulator.info/) 控制制表符 div 的大小。在具有给定 width/height 的 div 中，我希望有一个字段采用它需要的 space，并让 Tabulator table 填充其余部分（垂直）

以下代码适用于文本，但 tables 溢出第二个 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>

如果您用一些简单的文本替换 React15Tabulator 元素，绿色轮廓 div 会按预期填充垂直 space 的其余部分。

有了 React15Tabulator table，不仅 table 溢出了红色轮廓 div，而且绿色 div 本身也被拉长了。

有什么方法可以强制绿色 div 保持预期尺寸（使用 flex）？

Answer 1

答案归结为弹性属性的不完整使用。包含 Tabulator 元素的 div 必须具有相对位置属性，因此 children 将根据它计算其 position/size。 Tabulator 元素必须设置为绝对位置和 100% 高度。

添加到删除默认制表符边距和所有显示都很好。

<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 大小和 Tabulator table（React 版本）

Flex div size and Tabulator table (React version)

flexbox

reactjs

tabulator