div 溢出不适用于画布

Posted 2023-03-06

【中文标题】div 溢出不适用于画布

【英文标题】：Div overflow doesn't work with canvas

【发布时间】：2015-10-08 09:07:07

【问题描述】：

这是我页面中的代码

 <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"  ></canvas>
   </div>

  </fieldset>

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

这是我不想要的结果。如您所见，字段集（width: 60%;）覆盖了整个屏幕宽度及以上。 div 只滚动了画布的一小部分。

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

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

总之，我想要一个带有width: 60% 的字段集和一个滚动画布溢出-x 的div。我该怎么办？

【问题讨论】：

您在粘贴的代码中缺少>，这可能是问题所在吗？在<fieldset style="width: 60%; border: 1px solid #BBB; margin-left: auto; margin-right: auto; border-radius: 10px; text-align: center;"

不不，这只是写问题时的打字错误；）

你能创建一个当前输出的演示吗？

【参考方案1】：

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

在 Webkit 中，您只需将 min-width: 0; 添加到您的字段集即可修复它。

这里是一个sn-p：

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"  ></canvas>
    </div>
</fieldset>
</div>