CSS 溢出只滚动一个方向

Question

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

网址：

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}

}

我是使用弹性盒子的新手，所以我怀疑我犯了一个简单的错误，但我看不出有什么问题。

Answer 1

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

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

Answer 2

如果 居中 子元素使用 overflow: auto（或 scroll）溢出父元素，浏览器将不允许您滚动到子元素的左侧（或顶部，垂直溢出）限制.

这与正常的滚动行为有关。如果您希望子项超出父项的左侧或上限并且父项自动扩展以包含该项，则子项实际上并没有超出限制父母的，是吗？

要解决此问题，只有解决方案是

• 使您的孩子不扩大父母。
• 或在需要滚动条时立即放弃居中。

在您的情况下，一个不错的解决方案是：

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

或者，如果您不想包装内容并更喜欢滚动：

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

这里的关键元素是：当父级开始被子级溢出时（在您的情况下为1003px），您可以更改对齐方式以使滚动按您想要的方式运行，或者更改显示子级的方式以便它不会溢出父级。