HTML output for cell: how to set the size?

I have implemented a _repr_html_() function for my Python class so it can be displayed nicely in the notebook.

The HTML I create is dual purpose: wrapped in the full html/body tags for creating a web page to get viewed in a browser and only the relevant div for getting viewed in the notebook.

The div contains a nested div that uses the style settings “width: 100%; height: 100%” which in turn contains a nested div with “width: 100%; display: flex;” so that what I show there will automatically adapt to resizing of the browser window. That works well.

When I use that HTML with the notebook, the generated output nicely adapts to the width of the cell, but the height is always the same.

When I remove the “height: 100%”, the output size does not change.

When I set the height to some specific smaller value, the output size still does not change but instead the output is shown in a smaller viewport with a scroll bar on the right.

What I would like instead is for the viewport used to visualize my div becoming smaller.

Where does the height for the output in a cell come from? How can I change it for all cells, how can I change it for one particular cell?

I solved this by changing my own CSS for my HTML so that it just uses the height I need or some max-height.

1 Like