The code below is simplified version of actual one, but it "correctly" shows the problem -- I have window with T-layout. Top section with toolbar, and below the left with some long content, and the right which should take the remaining space.
I used "absolute" position for the left pane because my first problem was how to scroll long content within pane, this is what I found, so I used it.
On the right there is ChartJs and initially it really takes the remaining space but if I move the mouse over it refreshes the content, resulting in squashing the left pane to zero.
How to prevent it (not using hardcoded sizes, like "min-width: 200px")? As left-right panes sizing goes, my intention is "left -- take all what is necessary, right -- take the rest".
The code:
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</head>
<body style="background-color: pink; overflow:hidden;margin:0" onload="starter()">
<div style="display: flex;flex-direction:column; height: 100vh;width: 100%">
<!-- TOOLBAR -->
<div style="flex-shrink: 0; flex-grow: 0;">
<button>hello</button>
</div>
<div style="flex-shrink: 0; flex-grow: 1;
display: flex;flex-direction:row; ">
<!-- LEFT PANE -->
<div style="position:relative; background-color: aqua; overflow:scroll;
flex-shrink: 0; flex-grow: 1;">
<div style="position:absolute; width: 100%">
<div>
<h1>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>4</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>1</li>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>4</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>0</li>
</ul>
</h1>
</div>
<div>left</div>
</div>
</div>
<!-- RIGHT PANE -->
<div style="background-color: green; flex-shrink: 0; flex-grow: 1;
display: flex;flex-direction:column;">
<div style="position: relative;flex-shrink: 1; flex-grow: 1;">
<canvas id="bar-chart" style="" ></canvas>
</div>
<div style="flex-shrink: 0; flex-grow: 0;">right</div>
</div>
</div>
</div>
<script>
function starter(){
// https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
maintainAspectRatio : false,
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
}
</script>
</body>
</html>
