具有绝对位置的 div 具有带滚动条的 div 的内部宽度

Question

过去两天我在这里阅读了大多数问题，还有更多关于“填充剩余宽度”和“转义溢出：隐藏”的内容，但我可以解决不了我的问题。目前，我严重怀疑这是否可能。

我有一个全身宽度的滚动框。最重要的是，我有一个绝对定位的标题，我需要使其宽度与滚动框完全相同。我的意图是使标题0px 或（如果需要）1px 的高度增加，让内容溢出。

这是fiddle。

滚动框有一个滚动条（始终可见），标题显然没有。为了弥补这一点，我将一个假滚动条浮动到标题容器内的右侧，并在左侧浮动一个 <div> 填充剩余的宽度（恰好是滚动框的内部宽度）。

HTML

//THE SCROLLBOX
<div id="scrollbox">
  <div id="center2">
    content<br>content<br>...
  </div>
</div>


// THE HEADER 
<div id="header_box">
  <!--- FAKE SCROLLBAR -->
  <div id="scroller">
    <div></div>
  </div>

  // REMAINING WIDTH
  <div id="container">

    <div id="FIRST">
      <div id="FIRST_banner"></div>
    </div>
  </div>

  <div id="SECOND">
    <div id="SECOND_banner"></div>
  </div>
</div>

</div>

CSS

#header_box {
  background: yellow;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 25px;
  width: 100%;
  overflow: visible;
}

#scroller {
  float: right;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 50px;
  width: auto;
  /* visibility: hidden; */
}

#scroller>div {
  width: 0px;
  height: 101%;
}

#container {
  display: inline;
  width: auto;
  height: 50px;
  overflow: visible;
}

#FIRST {
  position: relative;
  overflow: hidden;
  height: 25px;
  background: pink;
}

#FIRST_banner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 220px;
  width: 30px;
  background: crimson;
}

#SECOND {
  background: darkcyan;
  position: relative;
  height: 5px;
}

#SECOND_banner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 220px;
  width: 30px;
  background: blue;
}

问题在于 剩余宽度的 div (#FIRST)。在所有解决方案中，我只阅读了带有

的解决方案

  position: relative;
  overflow: hidden;

为我工作。它给出了准确的宽度，很好地排列了标题的中心和滚动框。但是我无法突破overflow: hidden，所以它切断了内容。

所以我的第二个想法是：将#FIRST 包裹在#container 中，让孩子确定父母的宽度。之后，我可以在容器中放置另一个 div (#SECOND)，其宽度与父容器相同。它部分工作。 #container 具有预期的宽度，#SECOND div 很好地溢出，但具有 #header_box 的宽度，因为父级本身没有设置宽度。

所以，我的问题：

1. 我能以某种方式突破 FIRST div 的overflow: hidden 吗？ （在这种情况下，可以移除容器和第二个 div）。
2. 有没有办法让 SECOND div 服从其父级的宽度。
3. 一些完全不同的解决方案。

遗憾的是，这一切都有一个问题：

• 仅 CSS
• 没有javascript
• 没有弹性盒

谢谢你。

Answer 1

最后，是好老的<table> 拯救了这一天，比我想象的要简单得多。仍然有一个假滚动条，但绝对标题现在与它后面的可滚动div 的内容完美对齐，并且保持流畅。

See fiddle here

HTML：

  <!--- HEADER  -->
  <div id="THIRD">
    <div id="THIRD_A">
      <div id="THIRD_B"></div>
      <div id="THIRD_C"></div>
      <div id="THIRD_D"></div>
    </div>
  </div>

  <!--- FAKE SCROLLBAR -->
  <div id="scroller">
    <div></div>
  </div>

</div>

CSS：

/* The container for the header */
#header_box{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 0px;
  width: 100%;
  overflow: visible;
  display: table;
}

/* Takes on the width of its child: the fake scrollbar */
#scroller {
  display: table-cell;
  float: right;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 0px;
  width: auto;
}
/* This triggers a scrollbar to be shown */
#scroller>div {
  width: 0px;
  height: 101%;
}



/* The 'remaining width' container (= screenwidth - scrollbar, equals innerwidth of scrollbox) */
#THIRD{
    display: table-cell;
    width: 100%;
    height: 0px;
    }
/* Needed to give the children a 'width' reference */
#THIRD_A{
    position: relative;
    width: 100%;
    height: 0px;
    }

/* The actual header items */   
#THIRD_B {
position: absolute;
  top: 0;
  left: 50%;
  width: 25px;
  height: 220px;
  background: black;
}
#THIRD_C {
position: absolute;
  top: 0;
  left: 10%;
  width: 125px;
  height: 120px;
  background: black;
}
#THIRD_D {
position: absolute;
  top: 0;
  right: 0%;
  width: 25px;
  height: 220px;
  background: black;
}

注意： 在大多数手持浏览器上，这是 1px 关闭。似乎基于 webkit 的浏览器将 0px 宽度的表格单元显示为 1px 宽度(see this question)。解决方法是用css将表格包裹在另一个div中：

position absolute;
left: 0;
right: -1px

并将#scroller>div 设置为1px 的宽度。

注意 2： 这也是可滚动 div 内固定 div 的解决方案。 See this fiddle