Output widget expands too aggressively in HBox

[tovogt]

Description

When arranging an ipywidgets.Output widget next to another widget in an ipywidgets.HBox, the Output widget will take too much space. In the most extreme case, where you put an ipywidgets.VBox next to the Output widget, the contents of the VBox will even shrink to 0 width.

In the following screenshot, you see three examples:

1. Example where HBox/VBox layout works as expected. It only arranges ipywidgets.Dropdown and ipywidgets.Select widgets, and no Output widgets.
2. Example where a Select widget is next to an Output widget in an HBox, and the Select widget is shrinked even though it should have a fixed width (because the width parameter is set).
3. Example where a VBox is next to an Output widget and the Output widget consumes all the horizontal space so that the contents of the VBox are not visible at all.

Complete code (for copy-pasting)

import ipywidgets as widgets

w_select = widgets.Select(options=["abc", "def", "asdf"])
w_select.layout.width = "58ex"

w_dropdown = widgets.Dropdown(options=["a", "b"])

w_output = widgets.Output()
with w_output:
    print("asjdalhsd")

display(
    widgets.HBox([
        widgets.VBox([
            w_dropdown,
            w_select,
        ]),
        widgets.Select(options=["0123", "847", "92828"]),
    ])
)

display(
    widgets.HBox([
        w_select,
        w_output,
    ])
)

display(
    widgets.HBox([
        widgets.VBox([
            w_dropdown,
            w_select,
        ]),
        w_output,
    ])
)

Reproduce

1. Open a Jupyter Lab instance.
2. Create a new notebook.
3. Copy the code (see above) into the notebook.
4. Execute the whole notebook.
5. Observe that, in the last example, the Dropdown and Select widgets are not visible.

Expected behavior

The Dropdown and Select widgets should be visible next to the Output widget, just as in the first example.

Context

• ipywidgets version 8.1.0
• Operating System and version: Ubuntu 22.04.3, but the problem persists on other machines
• Browser and version: tested with Firefox 116.0.2, and Chromium 115.0.5790.110

Troubleshoot Output

Post gets too long. Please ask again if you really need this.

Command Line Output

Post gets too long. Please ask again if you really need this.

Browser Output

Post gets too long. Please ask again if you really need this.

If using JupyterLab

• JupyterLab version: 4.0.4

Installed Labextensions

JupyterLab v4.0.4
/home/tovogt/.local/share/miniconda3/envs/ipywidgets-test/share/jupyter/labextensions
        jupyterlab_pygments v0.2.2 enabled  X (python, jupyterlab_pygments)
        @jupyter-widgets/jupyterlab-manager v5.0.8 enabled OK (python, jupyterlab_widgets)
The following extensions are outdated:

jupyterlab_pygments
Consider checking if an update is available for these packages.

[TorbjornWidhe]

I have the same problem and found a workaround until this is fixed

w_output.layout.width = '50%' # Control the width of the output widget manually
display(
    widgets.HBox([
        widgets.VBox([
            w_dropdown,
            w_select,
        ]),
        w_output,
    ])
)

[fleming79]

I think this might have been fixed in the latest Jupyterlab release 4.0.7 with the horizontal scrolling fix.

[tovogt]

Yes, I can confirm that this issue is fixed in 4.0.7. Thanks for the feedback!