Как задать динамическую высоту блока?

Только для body не задавать фиксированную высоту, она должна быть динамической, высота только container управляется.

Есть какой то надежный способ, чтобы везде работало?

canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #f00;
}
.container {
  width: 300px;
  height: 100px;
  border: 1px solid #000;
}
.header {
  height: 20px;
  background: #3f3f3f;
  color: #fff;
}
.body {
  height: 100%;
}
<div class="container">
  <div class="header">Header</div>
  <div class="body">
    <canvas></canvas>
  </div>
</div


Ответы (1 шт):

Автор решения: Arcadiy

Замените height на min-height

canvas {
  width: 100%;
  min-height: 100px;
  border: 1px solid #f00;
}
.container {
  width: 300px;
  min-height: 100px;
  border: 1px solid #000;
}
.header {
  height: 20px;
  background: #3f3f3f;
  color: #fff;
}
.body {
  height: 100%;
}
<div class="container">
  <div class="header">Header</div>
  <div class="body">
    <canvas></canvas>
  </div>
</div>

→ Ссылка