CODEWITHSUNDEEP
javascripthtmlcss
roy05
roy05

Reputation: 431

How to expand a div to fit remaining viewport space but prevent a child element from expanding its size anymore?

Wirefram

As the wireframe indicates, I want the div to take up the remaining space of the viewport BUT not be expandable.

The issue I have is that I am rendering a canvas inside the div of say 800x1000px – I want it to scale accordingly to fit the div but instead, what is happening is that I am getting a vertical scroll on the div.

I have used flexGrow: 1 to expand the div but that doesn't solve the second issue.

Any help is appreciated.

Upvotes: 1

Views: 500

Answers (1)

Thunderarea
Thunderarea

Reputation: 479

I created an example that does what you want. The blue element is the canvas. If you want something different, please tell me and also if you can, provide some code. It works correctly on Chrome, Edge, Firefox and Safari 14.0.3 (credits to @Christos Lytras)

body, div {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

#navbar {
    height: 50px;
    background-color: lightgrey;
}

#container {
  height: calc(100% - 50px);
  display: flex;
}

#sidebar {
    width: 70px;
    background-color: lightblue;
}

#main {
  flex: 1;
}

canvas {
  width: 100%;
  height: 100%;
  display: flex; /*in order to work on Firefox*/
  background-color: #3939ff;
}
<div id="navbar"></div>
<div id="container">
  <div id="sidebar"></div>
  <div id="main">
    <canvas id="myCanvas" width="100" height="100"></canvas>
  </div>
</div>

Upvotes: 3

Related Questions