J'ai un élément de toile qui doit être un carré - la largeur est égale à la hauteur.
Cela fonctionne bien, mais lorsque j'augmente la hauteur de ma fenêtre autant que possible sur mon écran, l'augmentation correspondante de la largeur repousse les éléments de canevas apparentés hors de l'écran et une barre de défilement horizontale apparaît.
Je veux garder le contrôle de la taille de ce canevas central tout en redimensionnant dynamiquement les autres, en les réduisant s'ils sortent de l'écran.
<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;
}Comment puis-je y parvenir ? J'ai essayé de jouer avec flex-basis, flex-growth, display:inline-flex dans le conteneur extérieur, sans résultat.
