canvas having odd behaviour with width and height

Question

So I'm having some issues using <canvas>. It's taking up too much room when at 100% height and width and when it's set at only 100% height, it still causes and overflow for some reason.

Examples

With width and height at 100%, canvas takes up way too much room

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.upper {
  background-color: blue;
  height: 10%;
}

.lower {
  flex: 1;
  background-color: orange;
}

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

canvas {
  height: 100%;
  width: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}

.inner {
  width: 100%;
  height: 100%;
  background-color: yellow;
  position: relative;
}

<div class="flex">
  <div class="upper">
  </div>
  <div class="lower">
    <div class='inner'>
      <canvas></canvas>
    </div>
  </div>
</div>

Here, canvas is set at 100% height, yet it causes an overflow for some reason.

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.upper {
  background-color: blue;
  height: 10%;
}

.lower {
  flex: 1;
  background-color: orange;
}

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

canvas {
  height: 100%;
  background-color: red;
  padding: 0;
  margin: 0;
}

.inner {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<div class="flex">
  <div class="upper">
  </div>
  <div class="lower">
    <div class='inner'>
      <canvas></canvas>
    </div>
  </div>
</div>

Having the canvas fit snugly inside the `lower` div without the above issues — A. L, Dec 07 '17 at 01:36
Does adding `height: 90%` to `.lower` in your first example fix the issue? — Jonathan Nicol, Dec 07 '17 at 02:04
@JonathanNicol No, but even if it did, that defeats the purpose of using `flex: 1` — A. L, Dec 07 '17 at 02:11
1/2 – This most likely caused by the fact that canvas element has default width and height attributes set to 300 and 150 respectively and that by setting only its height through CSS, the browser somehow tries to keep the AR. You can see the same issue [with an ``](https://jsfiddle.net/za5frf55/1/) when you do set its width and height attributes to the same values. — Kaiido, Dec 07 '17 at 02:12
2/2 – I'm not sure of any CSS solution right now, but anyway, if you are going to use this ` — Kaiido, Dec 07 '17 at 02:12
@A.Lau How about setting `width` & `height` `100%` on the canvas in addition to `position: absolute`? I did a quick test and Chrome and it seems like it works: https://jsfiddle.net/rvt3va1p/ — Jonathan Nicol, Dec 07 '17 at 02:24
@JonathanNicol Seems to work, I'll have to test it on the weekend — A. L, Dec 07 '17 at 02:26

canvas having odd behaviour with width and height

0 Answers0