Div溢出不适用于画布

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中有一个画布，它设置了overflow-x: scroll属性。

这是我所拥有的结果，这是我不想要的。正如您所看到的，fieldset（width: 60%;）覆盖了整个屏幕宽度。 div只滚动画布的一小部分。

这应该是我想看到的结果：

这里我将画布宽度设置为750，以显示我想要的内容。

总之，我想让fieldset有一个width: 60%和一个div来滚动画布的overflow-x。我怎么能这样做？

Answer 1

这是fieldset元素的宽度/最小宽度的已知问题。有关修正，请参阅this question and it's answer。

在Webkit中，您只需将min-width: 0;添加到字段集即可解决此问题。

这是一个片段：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;