automatically adjust IPython widgets layout
<p>I'm creating an interactive <code>jupyter notebook</code> with <a href="https://github.com/ipython/ipywidgets" rel="nofollow noreferrer"><code>ipython widgets</code></a> and want the user to select from a certain number of checkboxes. I'm using the code below to visualize the <a href="https://ipython.org/ipython-doc/3/api/generated/IPython.html.widgets.widget_box.html" rel="nofollow noreferrer"><code>HBox</code></a> that contains the checkboxes.</p>

<pre><code>num_checks = 10

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%')

checkboxes = []
for f in range(num_checks):
    checkboxes.append(\
        widgets.Checkbox(description = 'Checkbox [%d]'%(f), \
                         value=False, width=50))

cb_cont.children=[i for i in checkboxes]
display(cb_cont)
</code></pre>

<p>Here is a screenshot of the output from the above code:</p>

<p><a href="https://i.stack.imgur.com/m25F9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m25F9.png" alt="enter image description here"></a></p>

<p>As you can see, the content of the box overflows and goes beyond the width of the container.</p>

<p>I can change the behavior by setting the <code>overflow_x</code> property to be one of the following: <code>['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', '']</code>.</p>

<p>For instance, <code>cb_cont.overflow_x = 'scroll'</code> results in the following output window:</p>

<p><a href="https://i.stack.imgur.com/KYFbk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KYFbk.png" alt="enter image description here"></a></p>

<p>in which the content doesn't overflow but becomes invisible and can be scrolled.</p>

<p><strong>How can I set the property of the box to visualize the content that does not fit on a newline?</strong></p>

<p>Obviously I could use multiple <code>HBox</code> objects each one containing the maximum number of checkboxes that fit in a window size, however this is not the wanted solution for a set of reasons:</p>

<ol>
<li>Depending on the screen resolution that number could change.</li>
<li>The number of checkboxes to pick from depends on a previous computation ans is not known it in advance.</li>
</ol>