为什么在绝对位置有 flexbox 和元素的浏览器中有不同的行为？

Question

我真的被这个问题搞疯了：

我想放置一个带有底边框的圆圈，以便在移动视图（宽度至少为 350px 或更小）时居中，但它不影响视图的边距。

我在 Angular 中进行的测试，但为了避免复杂性，我使用这个简单的 HTML 代码进行测试：

<html>
    <head>
        <title>Responsive Test</title>
    </head>
    <body>
        <style type="text/css">
        
            .home-circle-gray-bg {
                border-radius: 50%;
                border: 0.05rem dashed #000000;
                width: 530px;
                height: 530px;
                position: absolute;
                margin-top: 250px;
                background-color: transparent;
                right: 20%; 
                margin-left: 0px; 
                margin-right: 0px;
            }
            
            @media (max-width: 650px) {

                .home-circle-gray-bg {
                    left: 50% !important;
                    transform: translate(-50%,-50%) !important;
                }

            }
            
            .block {
                display: flex;
                flex-wrap: wrap;
                background-color: yellow;
            }
            
        </style>
        <div class="home-circle-gray-bg"></div>
        <div class="block">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </body>    
</html>

问题是什么？

我在 Firefox 中看到这个简单的代码，宽度分辨率为 350px，屏幕底部出现水平滚动（实际上它出现得更早，我会说在530px，也就是圆的宽度），包含文字的div是根据分辨率适配的，圆的左边部分是完美的，也就是说，它不占据 space 但在它后面，就好像它是背景一样，当减小宽度时它会更向左移动，我希望在圆的右侧有同样的效果。

圆圈右侧是问题，它似乎总是显示而不是向右移动更多（如左侧部分）直到它被隐藏或看得更少，我认为这是由“ left: 50%", 但是我该如何解决这个问题？

在Chrome中测试相同的代码是完全不同的结果，圆圈根据屏幕的宽度缩小。

为什么两种浏览器的结果不同？
是否可以在两种浏览器中获得我想要的内容？

谢谢！

Answer 1

在互联网上穷尽搜索后，我找到了一个解决方案并在两种浏览器中都有效：Position:absolute causes horizontal scrollbar

HTML代码：

<html>
    <head>
        <title>Responsive Test</title>
    </head>
    <body>
        <style type="text/css">
        
            .home-circle-gray-bg {
                border-radius: 50%;
                border: 0.05rem dashed #000000;
                width: 530px;
                height: 530px;
                position: absolute;
                margin-top: 250px;
                background-color: transparent;
                right: 20%; 
                margin-left: 0px; 
                margin-right: 0px;
            }
            
            @media (max-width: 650px) {

                .home-circle-gray-bg {
                    left: 50% !important;
                    transform: translate(-50%,-50%) !important;
                }

            }
            
            .block {
                display: flex;
                flex-wrap: wrap;
                background-color: yellow;
            }
            
            .wrapper {
                width: 100%;
                position: relative;
                overflow: hidden;
                height: 100%;
            }
            
        </style>
        <div class="wrapper">
            <div class="home-circle-gray-bg"></div>
            <div class="block">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </body>    
</html>

Firefox 和 Chrome 中的行为相同。

为什么在绝对位置有 flexbox 和元素的浏览器中有不同的行为？

Why is there a different behavior in browsers with flexbox and element in absolute position?

html

css

css-position

absolute

responsive