CSS Overflow 只向一个方向滚动

Question

我有一个网页，其中 CSS 溢出设置为自动。发生溢出时会出现滚动条，但它只能让我向右滚动。它不会向左滚动，因此无法看到左侧的裁剪部分。注意:这与处理垂直 滚动的其他帖子不重复。我的问题是水平滚动。

网址:

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

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>

样式表:

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

}

我刚开始使用 flex 盒子，所以我怀疑我犯了一个简单的错误，但我看不出有什么问题。

Answer 1

在您网站的 id #preface 中的 css 中，将 width: 100% 更改为 width: fit-content;，它应该可以解决你的问题。

当您使用 width:100% 时，该元素的宽度将与其父元素相同。 在您的情况下，父级是正文，当您使用 +/- 按钮放大时，正文宽度根据字体大小而不是他的子元素发生变化。