Div overflow doesn't work with canvas

Question

This is the code that I have in my page

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

As you can see I have a canvas inside a div, which has set the overflow-x: scroll property.

enter image description here

This is the result that I have which is what I am not looking for. As you can see the fieldset (which is width: 60%;) covers the entire screen width and over. The div is scrolling only a little part of the canvas.

This should be the result that I'd like to see:

enter image description here

Here I set the canvas width to 750 just to show what I want to have.

In conclusion, I want to have the fieldset with a width: 60% and a div that scrolls the overflow-x of the canvas. How could I do it?

You're missing a `>`in the code you pasted could this be the issue? in ` — filype, Jul 18 '15 at 22:40
No no it was just a typing error while writing the question ;) — Alberto Rossi, Jul 18 '15 at 22:42

score 2 · Answer 1 · edited May 23 '17 at 11:44

This is a known issue with the width/min-width of the fieldset element. See this question and it's answer for fixes.

In Webkit you can fix it by simply adding min-width: 0; to your fieldset.

Here a snippet:

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>

Div overflow doesn't work with canvas

1 Answers1