css - Canvas 忽略父大小

Question

我有一个在容器内显示 HTML canvas 元素的页面。由于 Canvas 中显示的图像可能远远大于我拥有的空间，我强制调整容器的大小并使用其溢出属性滚动 Canvas 的内容。虽然容器和滚动条都正确显示，但 Canvas 只是忽略了它。

我的 HTML:

<div class="sidebar">
   Some content
</div>
<div class="the_wrapper">
    <div class="canvas_wrapper">
       <canvas id="imageCanvas"></canvas>
    </div>
    <div class="another_element">
         Some other content
   </div>
</div>

这是 CSS:

 .sidebar{
    height: 100vh;
    width: 20vw;
    float: left;
 }

.the_wrapper{
    height: 100vh;
    width: 80vw;
    float: right;
}

.canvas_wrapper{
    height: 60vh;
    overflow: scroll;
}

.another_element{
    height: 40vh;
}

这就是我想要的

但我得到的只是这个

Answer 1

.the_wrapper 不需要右浮动。

 .the_wrapper{
    height: 100vh;
    width: 80vw;
    float: right; // Don't do that
}

就这样

.the_wrapper {
    position: absolute;
    right: 0;
    height: 100vh;
    width: 80vw;
}

我还重置了一些属性以获得第一个示例的结果。

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

这里的片段结果:

 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

.sidebar {
    height: 100vh;
    width: 20vw;
    float: left;
    border: 3px solid #000;
 }

.the_wrapper {
    position: absolute;
    right: 0;
    height: 100vh;
    width: 80vw;
}

.canvas_wrapper {
    height: 60vh;
    border: 3px solid green;
}

.another_element {
    height: 40vh;
    border: 3px solid red;
}

<div class="sidebar">Some content</div>
<div class="the_wrapper">
    <div class="canvas_wrapper">Canvas
       <canvas id="imageCanvas"></canvas>
    </div>
    <div class="another_element">Some other content</div>
</div>

您也可以在https://jsfiddle.net/lofeed/6n983g7x/4/中尝试