Question

我试图将绿色区域（伪元素）放在蓝色元素（伪元素的父元素）的右侧，这样绿色元素不会增加宽度红色卷轴区域，容器。我的实际用例有点复杂，但它依赖于使用伪元素，所以下面的示例很好地设置了问题。我已经包含了两个蓝色区域和两个绿色区域，只是为了表明如果蓝色宽度足够大，我希望滚动区域滚动。我只是不希望绿色区域成为计算的一部分：

＆＃13;

* {margin:0;padding:0}

div {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: auto;
}

span {
  display: inline-block;
  height: 50px;
  position: relative;
  background-color: blue;
  vertical-align: top;
}

span:before {
  content: '';
  position: absolute;
  left: 100%;
  width: 500px;
  top: 0;
  bottom: 0;
  background-color: green;
}

＆＃13;

<div>
  <span style="width:50px"></span>
  <span style="width:250px"></span>
</div>

＆＃13;

JS Fiddle

理想情况下，绿色伪元素将完全从布局中拉出并且没有宽度。问题是背景颜色是否有效需要宽度。我强烈怀疑我不能使用背景颜色。如果像轮廓右边的东西：500px纯绿色;存在这将是一个解决方案，但我找不到那样的东西。我无法使用box-shadow，border-right或其他任何东西，因为这些都会增加宽度。 CSS中是否有任何机制允许绿色区域不包含在红色的滚动宽度区域中？

Answer 1

使用外部容器，内部设置为溢出：隐藏;删除绝对定位的元素，使其不包含在宽度和滚动区域计算中。

使用最小宽度：100％;确保内部容器至少占据外部容器的整个宽度。

＆＃13;

* { margin: 0; padding: 0; }
#first {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: auto;
}
#second {
  display: inline-block;
  overflow: hidden;
  min-width: 100%;
}
span {
  display: inline-block;
  height: 50px;
  position: relative;
  background-color: blue;
  vertical-align: top;
}
span:before {
  content: '';
  position: absolute;
  left: 100%;
  width: 500px;
  top: 0;
  bottom: 0;
  background-color: green;
}

＆＃13;

<div id="first">
  <div id="second">
    <span style="width:50px;"></span>
    <span style="width:250px;"></span>
  </div>
</div>

＆＃13;

JS Fiddle

防止伪元素更改父容器的宽度/滚动宽度？

1 个答案: