In [1]:

    

from ipywidgets import Layout, Button, Box

items_layout = Layout( width='auto')     # override the default width of the button to 'auto' to let the button grow

box_layout = Layout(display='flex',
                    flex_flow='column',
                    align_items='stretch',
                    justify_content='space-between',
                    border='solid',
                    width='100%',
                    height='200px')

words = ['correct', 'horse', 'battery', 'staple']
items = [Button(description=word, layout=items_layout, button_style='danger') for word in words]
box = Box(children=items, layout=box_layout)
box


    

In [2]:

    

saved_height = 0
def resize_cb(height):
    global saved_height, fig
    if height != saved_height:
        box.layout.height = '%spx' % int(height)
        saved_height = height


    

In [3]:

    

%%javascript
function doSomething() {
var h1 = document.getElementById('header').offsetHeight;
var h2 = window.innerHeight - h1;
var kernel = IPython.notebook.kernel;
var command = "resize_cb(" + h2 +")";
console.log(command)
kernel.execute(command);
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});


    

In [ ]: