如何解释由于CSS滚动条的存在而导致的额外填充

Question

我有一个元素，它需要与页面单独部分上的另一个元素对齐。然而，当滚动条出现时，整个对齐就会被打乱。

如果存在滚动条，那么最好的方法是什么来处理由于滚动条的存在而导致的额外填充，以便无论滚动条是否存在，元素都保持对齐？

下面是一个示例应用程序来说明我的意思：

const App = () => {
return (
<div>
<h4>Case 1: There is no scroll, so my items are aligned as expected:</h4>
<div className="container">
<div className='header'>
<div className="element"/>
</div>
<div className='body'>
<div>
<div className="element"/>
</div>
<p>
I can easily align the two blue squares by setting body and header to <strong>padding-right: 20px</strong>, because all my content fits without scroll
</p>
</div>
</div>

<h4>Case 2: Now I have too much content, which needs to scroll, and my squares will be no longer aligned</h4>
<div className="container">
<div className='header'>
<div className="element"/>
</div>
<div className='body'>
<div>
<div className="element"/>
</div>
<div>
Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align!
</div>
</div>
</div>
</div>
)
}

ReactDOM.render(
<App />,
document.getElementById('app')
);

.container {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
height: 100px;

display: flex;
justify-content: flex-end;
align-items: center;

background-color: lightgrey;
padding: 20px;
}
.body {
height: 100%;
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 20px;
overflow-y: auto;
}
.element {
width: 50px;
height: 50px;
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

如果.container的宽度总是已知的，您可以使用它来定义.body内部元素的宽度：

.container {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: lightgrey;
padding: 20px;
}
.body {
height: 100%;
overflow-y: auto;
}
.body > div {
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 20px;
width: 300px;
}
.element {
width: 50px;
height: 50px;
background-color: blue;
}
* {
box-sizing:border-box;
}

<h4>Case 2: Now I have too much content, which needs to scroll, and my squares will be no longer aligned</h4>
<div class="container">
<div class='header'>
<div class="element"></div>
</div>
<div class='body'>
<div>
<div>
<div class="element"></div>
</div>
<div>
Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made
my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue squares no longer align! Scrollbar made my blue
squares no longer align! Scrollbar made my blue squares no longer align!
</div>
</div>
</div>
</div>

Answer 2

也许可以尝试隐藏滚动条🔒

body {
overflow: hidden; /* Hide scrollbars */
}

并尝试缩小整个机身宽度