Flexbox, холст и динамическое изменение размера

У меня проблемы с моим программным обеспечением на основе холста.

У меня есть 4 (или более) холста, каждый из которых завернут в div с остальным содержимым. Эти обертки сами обернуты в "hbox". Цель состоит в создании динамической сетки полос с помощью flexbox.

<div id="primaryScene" class="scene">
    <div class="hbox" id="hbox0" style="flex-grow: 1.2;">
        <div class="viewWrapper" id="view0" style="flex-grow: 0.4;">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
        <div class="viewWrapper" id="view1" style="flex-grow: 1.6;">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
    </div>
    <div class="hbox" id="hbox1" style="flex-grow: 0.8;">
        <div class="viewWrapper" id="view2">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
        <div class="viewWrapper" id="view3">
            <canvas class="canvasView"></canvas>
            <aside class="sideContent"></aside>
        </div>
    </div>
</div>

С помощью css:

.scene {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
    overflow: hidden;
}

.hbox {
    min-height: 0;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-flex;
    display: flex;
    position: relative;
}
.viewWrapper {
    min-height: 0;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    position: relative;
    margin: 0 2px 2px 0;
}

.canvasView {
    display: block;
}

.canvasView {
    position: absolute;
}

.sideContent{
    max-width: 120px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-right: 6px;
}

Поскольку мне нужны некоторые изменения размера, я не использую свойство CSS resize: both; Сложные проблемы добавляются, когда я пытаюсь добавить .sideContent, потому что я хочу их справа от каждого холста.

До этого, с абсолютным холстом, мне просто нужно было динамически обновлять ширину и высоту с помощью {.viewWrapper}.getBoundingClientRect().width|height (кроме того, что они flex:1, viewWrapper и hbox изменяются вручную с помощью flex-grow, как показано в приведенном выше коде). Теперь, когда я переключаю холст на flex:1; и удаляю абсолютное свойство, они больше не сокращаются. Я также получаю разные значения от {oneCanvas}.getBoundingClientRect() между Chrome и Firefox (не тестировал в IE), поэтому я тоже не могу использовать это.

Что я могу сделать? Скажите мне, если вам нужна дополнительная информация.

Ответ 1