Flexbox, canvas & dynamic resizing

Question

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

У меня есть 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), поэтому я не могу использовать это.

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

Answer 1

Я не уверен, что это то, что вы хотели, но вот пример скрипки ниже.

Сцена - это гибкий контейнер, позволяющий манипулировать различными hbox. viewwrapper также является гибким контейнером, так что вы можете настроить, как вы хотите, чтобы ваш холст и в сторону отгибались.

Причина, по которой добавление позиции: абсолютная, повлияет на макет, потому что абсолютно позиционированные элементы не участвуют в гибком макете.

https://www.w3.org/TR/css-flexbox-1/#abspos-items

https://jsfiddle.net/mzrrsunn/1/

.scene { 
    display: flex; 
} 

.hbox { 
    flex: 1; 
} 
.viewWrapper { 
    display: flex; 
    margin: 0 2px 2px 0; 
} 

.canvasView { 
    flex: 1 1 60%; 
} 

.sideContent{ 
    flex: 0 1 40%; 
} 

canvas{ 
    border:1px solid black; 
} 

aside { 
    border: 1px solid blue; 
}