html - Div 溢出不适用于 Canvas

Question

这是我页面中的代码

 <fieldset style="width: 60%; border: 1px solid #BBB; margin-left: auto; margin-right: auto; border-radius: 10px; text-align: center;">

   <div style="width: 95%; margin: 5px; padding: 6px; margin-left: auto; margin-right: auto; overflow-x: scroll; text-align: center;">
    <canvas id="graph" width="1645" height="300"></canvas>
   </div>

  </fieldset>

如您所见，我在 div 中有一个 Canvas ，它设置了 overflow-x: scroll 属性。

这是我得到的结果，而不是我想要的。如您所见，字段集(即 width: 60%;)覆盖整个屏幕宽度及以上。 div 仅滚动 Canvas 的一小部分。

这应该是我希望看到的结果:

这里我将 Canvas 宽度设置为 750 只是为了显示我想要的内容。

总而言之，我希望字段集具有 width: 60% 和一个滚动 Canvas 的 overflow-x 的 div。我该怎么做？

Answer 1

这是 fieldset 元素的宽度/最小宽度的已知问题。参见 this question and it's answer用于修复。

在 Webkit 中，您可以通过简单地将 min-width: 0; 添加到您的字段集中来修复它。

这里是一个片段:

fieldset {
    width: 60%;
    border: 1px solid #BBB;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    text-align: center;
    min-width: 0;
}
fieldset div {
    width: 95%;
    margin: 5px;
    padding: 6px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: scroll;
    text-align: center;
}

<div>
<fieldset>
    <div>
        <canvas id="graph" width="1645" height="300"></canvas>
    </div>
</fieldset>
</div>