Flex div size and Tabulator table (React version)

Question

我正在尝试根据flexbox css样式(http://tabulator.info/(控制制表器div的大小。 在具有给定宽度/高度的div 中，我想让一个字段占用它所需的空间，并让制表表填充其余部分(垂直(

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

如果将 React15 Tabulator 元素替换为一些简单的文本，则绿色轮廓的div 将按预期填充垂直空间的其余部分。

使用 React15 制表器表后，不仅表格会溢出红色轮廓的div，而且绿色div 本身也会被拉伸。

有什么方法可以迫使绿色div粘在预期的尺寸上(使用flex(？

Answer 1

答案归结为对 flex 属性的不完整使用。 包含制表器元素的div 必须具有相对位置属性，因此孩子们将根据该属性计算其位置/大小。 制表器元素必须设置为绝对位置和 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>