html - 如何CSS样式灵活的元素来匹配他们的 parent

Question

插图在此jsfiddle :

我想要的是在站点中心有一个圆 Angular 的 Canvas ，当你放大窗口时它会变大，当你缩小时它会变小。但是，我的 Canvas 容器和 Canvas 似乎都无法超出其全部容量。我做错了什么？

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  margin: 20px;
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

#canvas_container {
  border: 1px solid #aaa;
  border-radius: 15px;
  overflow: hidden;
  min-height:100px;
  min-width:100px;
  height: 100%;
}
#canvas {
  background: #f80;
  width: 100%;
  height: 100%;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content"> 
    <div id="canvas_container">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Answer 1

content div 已经被 flex 以适应。因此，对于 canvas-container 相对于 content 使用位置 absolute 就足够了，并删除 min-width 和 min-height 就可以了!

.box .row.content {
  margin: 20px;
  flex: 1 1 auto;
  position: relative;
}

#canvas_container {
  border: 1px solid #aaa;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
}

让我知道您对此的反馈。谢谢!

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  margin: 20px;
  flex: 1 1 auto;
  position: relative;
}

.box .row.footer {
  flex: 0 1 40px;
}

#canvas_container {
  border: 1px solid #aaa;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
}
#canvas {
  background: #f80;
  width: 100%;
  height: 100%;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content"> 
    <div id="canvas_container">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>