3 divs of the same height. Shrink left width and all heights with window

Question

Trying to do this with CSS only.

I have a canvas on the left side that I want to reduce both the width and the height when resizing the window. You want the center and right divs to shrink in height to fit the canvas. You don’t want the center and right divs moving under the canvas.

<div class="container">
  <div class="left">
      <canvas id="draw" width="250" height="300"></canvas>
  </div>
  <div id="center" class="center"></div>
  <div id="right" class="right"></div>
</div>

Fiddle: https://jsfiddle.net/mrx6zk27/

Any help would be greatly appreciated. While expecting, I will probably need JavaScript to level the heights, but you want to reduce JavaScript as little as possible.

Update: script using table layout (doesn't work): https://jsfiddle.net/mrx6zk27/2/

Answer 1

flexbox, div . . .

jsfiddle

var c = document.getElementById("draw");
ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 300);
ctx.fillStyle = "white";
ctx.font = "bold 40pt Arial";
ctx.fillText("CANVAS", 10, 100);

tmp = "";
for (var i = 0; i < 100; i++) {
    tmp += "<p>" + i + "</p>";
}

document.getElementById("center").innerHTML = tmp;
document.getElementById("right").innerHTML = tmp;

.container {
    max-width: 650px;
    margin: 0 auto;
    border: 1px solid black;
    display: flex;
}
.container > div {
    position: relative;
    min-width: 0;
}
.left {
    max-width: 250px;
    width: auto;
}
.left canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
.center {
    flex: 0 0 200px;
    overflow-y: scroll;
    background-color: blue;
}
.right {
    flex: 0 0 200px;
    overflow-y: scroll;
    background-color: green;
}
.scroll {
    position: absolute;
    width: 100%;
}

<div class="container">
    <div class="left">
        <canvas id="draw" width="250" height="300"></canvas>
    </div>
    <div class="center"><div id="center" class="scroll"></div></div>
    <div class="right"><div id="right" class="scroll"></div></div>
</div>

Answer 2

, , , , display: table.

<div id="container" style="display: table; width:100%;">
    <div style="display: table-cell; background-color: red; width:-100%; height:200px"></div>
    <div style="display: table-cell; background-color: blue; width:300px;"></div>
    <div style="display: table-cell; background-color: green; width: 300px;">     </div>
</div>

http://jsfiddle.net/8mpx1kok/2/