CSS Overflow Scrolls Only One Direction

Question

I have a Web page where the CSS overflow is set to auto. The scroll bar appears when overflow occurs, but it lets me scroll only to the right. It won't scroll left, so there's no way to see the clipped portion on the left side. NOTE: This is not a duplicate of other posts dealing with vertical scrolling. My problem is with horizontal scrolling.

The URL:

http://www.hymntime.com/tch/bio/h/a/v/havergal_fr.htm

The HTML:

<div id="preface">
    <div>
        <figure><img alt="portrait" src="../../../../img/h/a/v/havergal_fr3.jpg"></figure>
    </div>
    <div style="min-width: 15em;">
        <p id="birth">De­cem­ber 14, 1836, 
            <span class="map" onclick='show("Astley,Worcestershire DY13,UK")'>Ast­ley</span>, Wor­ces­ter­shire, Eng­land.
        </p>
        <p id="death">June 3, 1879, 
            <span class="map" onclick='show("Caswell Bay,UK")'>Cas­well Bay</span> (near Swan­sea), Wales.
        </p>
        <p id="burial">
            <span class="map" onclick='show("52.306124,-2.312777")'>Pri­ory Church of St. Pe­ter</span>, Ast­ley, Wor­ces­ter­shire, Eng­land. On her tomb­stone was the Scrip­ture verse she claimed as her own:
        </p>
        <blockquote>
            <p>The blood of Je­sus Christ cleans­eth us from all sin.<br>1 John 1:7</p>
        </blockquote>
    </div>
    <div>
        <figure><img alt="portrait" src="../../../../img/h/a/v/havergal_fr_4.jpg"></figure>
    </div>
    <div>
        <figure><img alt="portrait" src="../../../../img/h/a/v/havergal_fr_2.jpg"></figure>
    </div>
</div>

The style sheet:

#preface {
    border-top: 2px solid black;
    display:  flex;
    overflow: auto;
    justify-content: center;
    align-items: center;
    padding-top: 2ex;
    padding-bottom: 2ex;
 }
#preface .copyright, preface .license { text-align: center; }
#preface > div > p { margin: 1em; }
#preface figure { margin-left: .5em; margin-right: .5em; }
#preface img  { border: 8px ridge silver; border-radius: 20px; }
#preface ul { padding-left: 3em; }
.preface-text {min-width: 15em}

}

I'm new to using flex boxes, so I suspect I've made a simple mistake, but I can't see what's wrong.

Answer 1

In your css in id #preface at your website change width: 100% to width: fit-content;, it should solve your problem.

When you are using width:100% the element will be the same width as its parent element. In your case the parent is the body and when you zoom in with the +/- buttons the body width changes according to the font size and not his child elements.

Answer 2

If a centered child overflows a parent with overflow: auto (or scroll), the browser won't allow you to scroll to the child's left (or top, on vertical overflow) limit.

This has to do with normal scroll behavior. If you want a child to extend over the left or the top limit of a parent and the parent automatically extends to contain that, the child doesn't really extend over the limit of the parent, does it?

To fix this, the only solutions are

• to make your child not expand the parent.
• or to give up centering as soon as the scrollbar is required.

A decent solution in your case would be:

@media (max-width: 1003px) {
  #preface div[style] {
    max-width: 15em;
  }
  #preface {
    flex-wrap: wrap;
  }
}

Or, if you don't want to wrap contents and prefer the scroll:

@media (max-width: 1003px) {
  #preface {
    justify-content: start;
  }
}

The key element here being: when the parent starts being overflown by the child (1003px in your case), you either change the alignment so the scroll behaves as you want it or change the way you display the child so it doesn't overflow the parent.