Scroll bar is automatically added to figure element-CodePudding

When I try to add an image inside a <figure> element, sometimes I get a vertical scroll bar next to it in my markdown editor. If I export it to HTML, it is gone, but if I export it to PDF, the scroll bar persists. This is unpleasant and ugly and I do not know how to get rid of it. This is what I use as html and CSS: HTML:

<figure>
    <img src="https://i.imgur.com/RGLj3oV.jpg" />
    <figcaption>Hello</figcaption>
</figure>

CSS:

figure {
    display: block;
}

figure img{
    max-width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
figcaption {
    color: #9BB4BC;
    text-align: center;
    font-style: italic;
    font-size: 1em;
}

figure with scroll bar

CodePudding user response：

The vertical scroll bars appears because the height of the element is not big enough, to fix this use the css attribute height: auto; in the figure section.

for now I interpret you want to keep the scrolling but simply disable the showing of the scrolling bar, to do this do the following.

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

body { overflow: hidden; /* Hide scrollbars */ } To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x:

body { overflow-y: hidden; /* Hide vertical scrollbar */ overflow-x: hidden; /* Hide horizontal scrollbar */ }

source: w3school

CodePudding user response：

You can hide the scroll bar inside the figure tag. Use:

figure::-webkit-scrollbar{
  display: none;
}

Note this might not work in all browsers, a more compatible way would be setting overflow: hidden on the body or the parent tag of the figure, then set the figure tag to overflow: scroll in order to still be able to scroll.