CODEWITHSUNDEEP
javascripthtmlcssflexbox
quantumpotato
quantumpotato

Reputation: 9767

Force flexbox divs to shrink to keep all elements fit in screen

I have a canvas element that I want to be a square - width set equal to height.

This works fine, however when I expand my window height as far as possible on my monitor, the corresponding growth in width pushes the sibling canvas elements off screen and a horizontal scroll bar appears.

I want to maintain my size control over this center canvas while dynamically resizing the others -- shrinking if they would go off screen.

<html>
<center>
<body bgcolor="#4c5959">
<link rel="stylesheet" href="style.css">
<center>
<div class="container">
<canvas id="info" class="panel"></canvas>
<canvas id="board" class="panel"></canvas>
<canvas id="actions" class="panel"></canvas>
</div>

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = board.width/board.height;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

  window.display.w = height;;
  window.display.h = height;
}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
</script>

.container {
  display:flex;
  height:100%;
  width:100%;
}

.panel {
  display:flex;
}

#board {
  width:50%;
  height:100%;
  background:#9b59b6;
}

#info {
  width:25%;
  height:100%;
  background:#3498db;
}

#actions {
  width:25%; 
  height:100%;
  background:#1abc9c;
}

How can I accomplish this? I have tried playing with flex-basis, flex-growth, display:inline-flex in the outer container with no results.

Upvotes: 2

Views: 3564

Answers (1)

tao
tao

Reputation: 90188

Is this what you're looking for?

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = 1;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
body {
  background-color: #4c5959;
  margin: 0;
}
*{
  box-sizing: border-box;
}
.container {
  display:flex;
  height:100vh;
  width:100vw;
}

.side {
  flex: 1 1 25%;
  width: 25%;
}
.side canvas {
  height: 100vh;
  width: 100%;
  float: left;
}

#board {
  background:#9b59b6;
  width: 50vw;
  height: 100%;
}

#info {
  background:#3498db;
}

#actions {
  background:#1abc9c;
}
<div class="container">
  <div class="side">
    <canvas id="info"></canvas>
  </div>
  <canvas id="board"></canvas>
  <div class="side">
    <canvas id="actions"></canvas>
  </div>
</div>

Upvotes: 1

Related Questions