Simple repro of height bug when trying to get a `<regular-table>` to participate in a flex layout

[telamonian]

The repro

I came up with a simple repro of the issue I was having in #115:

https://bl.ocks.org/telamonian/00c777c2194e11f43bd7ade294095aa1

The "bug"

The <regular-table> element renders as zero height.

Description

In the above example, there's an #outer flex box that contains two children:

• a simple <span> with some text content
• a <regular-table> with ~15,000 data rows

In order to get a <regular-table> element to participate in a flex layout, you have to change it's position (or wrap it in a <div> and change the position of that) to something other than absolute (I think maybe it has to be position: relative, not 100% sure). As soon as you change position, though, the <regular-table> disappears. The only resolution seems to be to set an explicit height in px on at least one of the parent elements of the <regular-table>. In theory, the height of the <regular-table> should be taken care of by the flex layout.

Is this a bug or not? If it is a bug, how do we fix it?

My sense is that there's a tweak to some virtual size calculation somewhere in scroll_body.js that will allow for height to be controlled by the flex layout

[domehead100]

This is old, but if you add flex-grow: 1 to the regular-table in addition to position: relative, then it should fill the remaining height in the flex container.

Like most table/grid components, it’s mostly up to you to size/constrain the table/viewport size.