Problem Description:

The height of the page will increase as the number of chats increases, and the scroll bar will appear. The default width of the scroll bar is 17px, so every time the content area to the right of the scroll bar will be squeezed, affecting the layout

Solutions:

1. Usemargin-right:calc(100% - 100vw );

100% is the available width of the browser, 100vw is the internal width of the browser window.innerWidth is the width that contains the scroll bar, and margin-right:0 if there is no scroll bar; Margin-right :-17px when there is a scroll bar, offset by the 17px width of the scroll bar.

//css * { margin: 0; padding: 0; } html { overflow-y: auto; overflow-x: hidden; } .container { height: 2000px; margin-right: calc(100% - 100vw); /* padding: 17px; Background-color: #00b83f; text-align: right; } // HTML <div class="container"> <div class="inner"> <h1>Copy the code

2. Use overflow-y: overlay;

This property is new, not documented, and not very compatible. It is used inside containers that need to hide scrollbars.

//css * { margin: 0; padding: 0; } .container { margin: 100px auto; width: 200px; height: 100px; /* padding-right: 17px; */ /* box-sizing: border-box; Background-color: #00b83f; text-align: right; overflow: auto; overflow-y: overlay; } .inner { width: 100%; height: 300px; background-color: pink; } // HTML <div class="container"> <div class="inner"> <h1>Copy the code