Colab: grid_area that is not in the `grid_template_areas` unexpectedly displaying

[runfish5]

trafficstars

Description

In google colab: I display a GridBox widget and I play around with the grid_template_areas. In particular, I set up an 2x1-Gridbox, but specify three children=[header, main, btn_reverse]. The btn_reverse is a Button which has asigned a grid_area that is not mentioned in the GridBox.layout.grid_template_areas, thus I expect that it would not display. However, insted of btn_reverse beeing invisible, it gets appended after the specified 'header' and 'main'. The same is true if I refresh the GridBox.layout.grid_template_areas to exclude the widget main.

Reproduce

1. Open the github gist in or go directly to 'https://gist.github.com/raven44099/efaed7a8f50b8a9b5966c8eb7b611009'
2. Run the only cell.
3. Observe where the red Button is displayed.
4. Optionally: Click on the 'click me to change layout' button.

Expected behavior

The red button should only be displayed after clicking of the btn_foward ( = Button(description='click me to change layout').

Context

• ipywidgets version 7.7.1
• Operating System and version:
• Browser and version: Chrome Version 106.0.5249.103 (Official Build) (64-bit)

[runfish5]

The obvious workaround of changing layout.visibility to 'hidden' does not work. Although the widgets get hidden, the output GridBox still changes its shape according to the size of the main-widget.