元素在容器外

Question

为什么元素在容器之外？在底部，黄色元素看不到约0.5像素，带有橙色边框的容器也是如此。滚动条也与容器重叠。我以为border-box的目的是确保内部元素不会超出包含元素的范围。

.inner-element {
    height: 3000px;
    width: 20px;
    background: lightgoldenrodyellow;
    border: solid 2px black;
    box-sizing: border-box;
}

容器元素

.container {
    display: flex;
    width: 400px;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid orange;
    overflow-y: auto;
}

此Stackblitz的左侧边栏：

https://stackblitz.com/edit/2-column-scroll-v2?file=src%2Fapp%2Fmy-view%2Fmy-view.component.css

Answer 1

我已将您的代码转换为摘要。并且inner-element保持在container内，符合预期。我已将lightblue背景添加到container中以使其更好看。因此，您遇到的问题与您提供的代码无关。

.inner-element {
  height: 1000px;
  width: 20px;
  background: lightgoldenrodyellow;
  border: solid 2px black;
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 400px;
  box-sizing: border-box;
  background: lightblue;
  border: 2px solid orange;
  overflow-y: auto;
}

<div class="container">
  <div class="inner-element">&nbsp;</div>
</div>