我需要约束div中的内容，它的高度、宽度、最大高度或最大宽度设置为零或更多，如果内容在任何一个维度上小于容器，它必须在那个维度上居中;如果它更大，它必须在该维度中可滚动，并开始滚动到顶部/左侧。
这就像我预期的那样呈现了，图像和文本四处滚动，图像的左上角最初显示：
<div style="background-color:red;max-width:10rem;max-height:10rem;overflow:auto">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>它看起来像这样：
这是完整的图像：
这并没有像我预期的那样呈现（注意添加了display:flex;flex-direction:column;justify-content:center）：
<div style="background-color:red;max-width:10rem;max-height:10rem;overflow:auto;display:flex;flex-direction:column;justify-content:center">
<div>
<img src="https://picsum.photos/id/123/400/300.webp">
</div>
<div>test</div>
</div>它看起来像这样：
如果我删除justify-content，那么最初会显示图像的左上角，正如预期的那样，但是，如果内容小于容器，则内容不再垂直居中。
我的问题是：
- 为什么
justify-content会影响内容的可滚动性和位置？它不应该只影响它所设置的div的直接子项吗？ - 如何达到我需要的效果？
JSF中间文件：https://jsfiddle.net/5m4hec27/
1条答案
按热度按时间5jvtdoz21#
请检查代码片段并尝试运行它。尝试使用高度和宽度的值。
1.如果容器宽度大于子元素宽度，则由于justify-content属性，子元素将自动水平居中。
1.如果容器宽度小于子容器宽度，那么由于overflow属性，容器将显示水平滚动条。
1.如果container Height大于子元素，则子元素将由于align-items属性而自动垂直居中。
1.如果容器的高度小于子容器的宽度，那么由于overflow属性，它将显示一个垂直滚动条。
注：1。内容调整不影响滚动能力2。如何达到效果-请看附件中的小提琴。