CSS溢出仅滚动一个方向

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

网址：

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>

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

在id

#中的css中，在你的网站上将
宽度：100%
更改为
宽度：适合内容，它应该可以解决您的问题

使用宽度：100%时，元素的宽度将与其父元素的宽度相同。
在您的情况下，父对象就是主体，当您使用+/-按钮放大时，主体宽度会根据字体大小而不是其子元素而变化。
在您的css中，在id
#序言中，在您的网站上将
宽度：100%
更改为
宽度：适合内容，它应该可以解决您的问题

使用宽度：100%时，元素的宽度将与其父元素的宽度相同。
在您的情况下，父对象是主体，当您使用+/-按钮放大时，主体宽度会根据字体大小而不是其子元素而变化。
如果居中的子对象使用
溢出：自动（或
滚动
）溢出父对象，浏览器将不允许您滚动到子对象的左侧（或顶部，垂直溢流）限制

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

要解决此问题，只需使用解决方案


使您的孩子不展开父对象
或者在需要滚动条时立即放弃居中

在您的情况下，一个体面的解决方案是：

@介质（最大宽度：1003px）{
#序言部[文体]{
最大宽度：15em；
}
#序言{
柔性包装：包装；
}
}

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

@介质（最大宽度：1003px）{
#序言{
证明内容：开始；
}
}

这里的关键元素是：当父节点开始被子节点溢出时（在您的情况下是
1003px
），您可以更改对齐方式，使滚动按您所需的方式运行，或者更改显示子对象的方式，使其不会溢出父对象。
如果居中的子对象使用
溢出：自动溢出（或
滚动
）溢出父对象，浏览器将不允许您滚动到子对象的左侧（或顶部，垂直溢流）限制

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

要解决此问题，只需使用解决方案


使您的孩子不展开父对象
或者在需要滚动条时立即放弃居中

在您的情况下，一个体面的解决方案是：

@介质（最大宽度：1003px）{
#序言部[文体]{
最大宽度：15em；
}
#序言{
柔性包装：包装；
}
}

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

@介质（最大宽度：1003px）{
#序言{
证明内容：开始；
}
}

这里的关键元素是：当父节点开始被子节点溢出时（在您的情况下是
1003px
），您可以更改对齐方式，使滚动显示符合您的要求，也可以更改显示子对象的方式，使其不会溢出父对象。
Hi，您的站点上下滚动没有问题，您需要在哪里向左和向右滚动？Hi可能重复，您的站点上下滚动没有问题，您需要在哪里向左滚动d right？可能与我在样式表中添加的width:fit内容重复，但没有效果。仍然无法向左滚动。事实上，在Firefox响应设计模式（Firefox版本68.0.1，64位）中，调试器说width:fit content*是“无效属性值”。我不知道为什么，因为我在多个网站上看到对该值的引用。我在样式表中添加了width:fit content，但没有效果。仍然无法向左滚动。事实上，在Firefox响应设计模式（Firefox版本68.0.1，64位）中，调试器说width:fit content*是“无效属性值”。我不知道为什么，因为我在多个网站上看到了对该值的引用。谢谢！这是第一个看起来似乎合理的回答。这部分是“正常的滚动行为”吗任何地方都有文档记录？我之前搜索过类似的内容，但没有找到。如果是，我也不知道。我使用这个术语是因为没有更好的名称。无论您如何命名，它都是关于孩子向左或向上溢出家长时的情况。您是从孩子开始还是从家长开始的家长可滚动区域开始？答案是：父母在哪里，或者孩子不会溢出父母，是吗？想想你有意识地把孩子放在外面的情况，比如一个隐藏的边栏，它会滑入，或者类似地，一个隐藏的顶部栏。谢谢！这是第一个似乎合理的回答。这是关于“正常滚动行为"任何地方都有文档记录？我之前搜索过类似的内容，但没有找到。如果是，我也不知道。我使用这个术语是因为没有更好的名称。无论您如何命名，它都是关于孩子向左或向上溢出家长时的情况。您是从孩子开始还是从家长开始的家长可滚动区域开始？答案是：在哪里
#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}

}