Output widget doesn't display horizontal scroll even after setting layout.overflow

[shaielc]

Description

Can't create horizontal scroll on Output widget.

Using in a scenario similar to #3184, but with matplotlib (ipympl).

1. It seems like there's an HTML Element between the output widget and the output that sets overflow: hidden in the CSS, overriding with auto makes the scrollbar visible
2. I have managed to create the desired effect in a Box

Reproduce

1. clean install jupyterlab ipywidgets
   I am not using anaconda - so
   1.1. new venv
   1.2. activate venv
   1.3. python -m pip install -U pip
   1.4. python -m pip install -U setuptools
   1.5. python -m pip install -U jupyterlab
   1.6. python -m pip install -U ipywidgets
2. Create some widget/s
3. Display the widgets in an Output widget with shorter width
4. Open inspector and find the output widget.

<div class="lm-Widget p-Widget lm-Panel p-Panel jupyter-widgets widget-output" style="overflow: visible; width: 200px">
    <div class="lm-Widget p-Widget jp-OutputArea">
        <div class="lm-Widget p-Widget lm-Panel p-Panel jp-OutputArea-child">
            <div class="lm-Widget p-Widget jp-OutputPrompt jp-OutputArea-prompt"></div>
            <div class="
          lm-Widget
          p-Widget
          lm-Panel
          p-Panel
          jupyter-widgets
          jp-OutputArea-output
        ">
                <div class="
            lm-Widget
            p-Widget
            lm-Panel
            p-Panel
            jupyter-widgets
            widget-container widget-box widget-hbox
          " style="display: flex; flex: 1 0 auto">
                    <button class="
              lm-Widget
              p-Widget
              jupyter-widgets jupyter-button
              widget-button
            " title="" style="width: 300px"></button><button class="
              lm-Widget
              p-Widget
              jupyter-widgets jupyter-button
              widget-button
            " title="" style="width: 300px"></button>
                </div>
            </div>
        </div>
    </div>
</div>

5. Note the div with the class: jp-OutputArea-child has visible:hidden overriding for this div with overflow: auto fixes the problem
   Note: the first div has the inline style defined using the code below:

Code:

import ipywidgets as wg

btn_a = wg.Button(layout=wg.Layout(width="300px"))
btn_b = wg.Button(layout=wg.Layout(width="300px"))

res = wg.Box([btn_a, btn_b], layout=wg.Layout(flex="1 0 auto",
                                               display="flex",
                                               width="300px"))

out = wg.Output(layout=wg.Layout(
    width="200px",
    overflow="visible"))
with out:
    display(res)
out

Expected behavior

The Output widget should display a scrollbar when its content is larger than itself

Context

• ipywidgets version 7.6.5
• Operating System and version: Win10
• Browser and version: Chrom 95.0.4638.69

If using JupyterLab

• JupyterLab version: 3.2.4

Installed Labextensions

JupyterLab v3.2.4
        @jupyter-widgets/jupyterlab-manager v3.0.1 enabled ok (python, jupyterlab_widgets)

Workaround

import ipywidgets as wg

btn_a = wg.Button(layout=wg.Layout(width="300px"))
btn_b = wg.Button(layout=wg.Layout(width="300px"))

res = wg.Box([btn_a, btn_b], layout=wg.Layout(flex="1 0 auto",
                                               display="flex",
                                               width="300px"))

box = wg.Box(layout=dict(display="flex", width="200px"))
box.children = [res]
box

Screenshot

Output:

[azjps]

In case it helps, I think this is fixed in ipwidgets==8.0.0b0 (or any of the other 8.x pre-releases) due to #2500, or you can try building ipywidgets with the fix locally following something like this.

[shaielc]

In case it helps, I think this is fixed in ipwidgets==8.0.0b0 (or any of the other 8.x pre-releases) due to #2500, or you can try building ipywidgets with the fix locally following something like this.

Confirming that this fixes the issue. thx!

[vidartf]

With 8.x released, I'm closing this as resolved.