当 html 缩小到 50% 并增加宽度以适应窗口时，您可以在运行以下代码时观察到有一个滚动条。这在 firefox 中没有发生，仅在 chrome 中发生。 https://codepen.io/rohinikumar4073/pen/qBJbLqp
html {
transform: scale(0.5);
transform-origin: left top;
width: 200%;
height: 50%;
}
.parent {
background: yellow;
}<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta fermentum leo ut rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nibh augue, viverra ut purus id, aliquet hendrerit dui. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque suscipit feugiat neque, nec convallis felis viverra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar pulvinar arcu id iaculis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec faucibus imperdiet leo, tincidunt consectetur ante. Donec accumsan mauris vitae velit lacinia molestie. Nunc quis porttitor odio. Aenean sit amet nisl sem. Etiam ultricies
arcu ut orci condimentum tempus. Aliquam eget purus nulla. Nullam elementum neque ut elit consequat varius. Cras facilisis faucibus diam, ac venenatis augue porttitor laoreet. Donec tincidunt arcu vel porttitor consequat. Vestibulum molestie urna id
ipsum molestie suscipit. Aenean id finibus ex, venenatis sagittis ipsum. Cras id nibh pretium, dictum justo vehicula, pellentesque nunc. In rutrum, tellus at posuere bibendum, eros sapien pellentesque nisi, eu blandit mi nisi a mi. Quisque vitae nunc
sed quam varius tincidunt id eget libero. Nunc id risus eget nisi molestie fringilla sit amet eget elit. Duis nec dolor porta massa elementum finibus a et nunc. In a augue vitae orci tempor placerat. Suspendisse at tempor metus, pharetra sodales arcu.
Cras placerat facilisis odio vitae condimentum. Aenean sodales dapibus fermentum. Donec sem sapien, finibus vel ultrices vitae, finibus fermentum velit. Fusce ante massa, pulvinar sed blandit tempus, rhoncus at justo. Fusce varius justo sed arcu malesuada,
vitae aliquet felis gravida. Integer sit amet dolor vitae libero blandit hendrerit. Mauris rutrum erat nec molestie tincidunt. Sed libero diam, blandit eu nisl at, sollicitudin pellentesque nunc. Quisque ac laoreet nisi. Vestibulum eu posuere odio,
iaculis scelerisque quam. Morbi facilisis tellus non pulvinar faucibus. Nulla fringilla, velit nec feugiat fringilla, turpis sem pretium lectus, nec auctor arcu nisl ut felis. Cras eleifend efficitur commodo. In elit est, semper ut mauris non, dignissim
suscipit ex. Sed sodales ac ex a consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eget diam at nisl luctus tempus pellentesque ut nulla.
</div>在html元素上使用CSS的transform属性时，也可以在html元素上加上overflow:hidden来隐藏Chrome中的滚动条：
html {
transform: scale(0.5);
transform-origin: left top;
width: 200%;
height: 50%;
overflow:hidden;
}
.parent{
/* overflow:auto; */
/* height:100px; */
font-size: 25px;
background:yellow;
}<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta fermentum leo ut rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nibh augue, viverra ut purus id, aliquet hendrerit dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque suscipit feugiat neque, nec convallis felis viverra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar pulvinar arcu id iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec faucibus imperdiet leo, tincidunt consectetur ante. Donec accumsan mauris vitae velit lacinia molestie. Nunc quis porttitor odio.
Aenean sit amet nisl sem. Etiam ultricies arcu ut orci condimentum tempus. Aliquam eget purus nulla. Nullam elementum neque ut elit consequat varius. Cras facilisis faucibus diam, ac venenatis augue porttitor laoreet. Donec tincidunt arcu vel porttitor consequat. Vestibulum molestie urna id ipsum molestie suscipit.
Aenean id finibus ex, venenatis sagittis ipsum. Cras id nibh pretium, dictum justo vehicula, pellentesque nunc. In rutrum, tellus at posuere bibendum, eros sapien pellentesque nisi, eu blandit mi nisi a mi. Quisque vitae nunc sed quam varius tincidunt id eget libero. Nunc id risus eget nisi molestie fringilla sit amet eget elit. Duis nec dolor porta massa elementum finibus a et nunc. In a augue vitae orci tempor placerat. Suspendisse at tempor metus, pharetra sodales arcu. Cras placerat facilisis odio vitae condimentum. Aenean sodales dapibus fermentum.
Donec sem sapien, finibus vel ultrices vitae, finibus fermentum velit. Fusce ante massa, pulvinar sed blandit tempus, rhoncus at justo. Fusce varius justo sed arcu malesuada, vitae aliquet felis gravida. Integer sit amet dolor vitae libero blandit hendrerit. Mauris rutrum erat nec molestie tincidunt. Sed libero diam, blandit eu nisl at, sollicitudin pellentesque nunc. Quisque ac laoreet nisi. Vestibulum eu posuere odio, iaculis scelerisque quam.
Morbi facilisis tellus non pulvinar faucibus. Nulla fringilla, velit nec feugiat fringilla, turpis sem pretium lectus, nec auctor arcu nisl ut felis. Cras eleifend efficitur commodo. In elit est, semper ut mauris non, dignissim suscipit ex. Sed sodales ac ex a consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eget diam at nisl luctus tempus pellentesque ut nulla.
</div>这可以防止即使内容因缩放而溢出，也不会出现滚动条。确保所有内容都适合缩小的视口，因为这可能会隐藏任何溢出视口的内容。
使用 transform: scale() CSS 属性进行缩小时，如果元素的内容对于其容器来说太宽，可能会出现水平滚动条。为防止这种情况，您可以将以下 CSS 应用于容器元素：
enter code here.container {
溢出-x：隐藏； }
这将隐藏水平滚动条并防止用户在缩小时水平滚动。
或者，您也可以将容器元素的 min-width 属性设置为等于或大于内容缩小后的宽度的值。这将确保容器元素始终足够宽以适应内容，即使在缩小时也是如此。然而，这种方法可能并不适用于所有情况，因为内容的宽度可能会因视口大小和其他因素而异