Overflow-x滚动，overflow-y同时覆盖

Question

假设我有一个容器

​

.container {
  width: 400px;
  
  display: flex;
  align-items: flex-start;
  /* overflow-x: hidden; */
  overflow-y: overlay;
  
  max-height: 47px;
}

.item {
  white-space: nowrap;
  padding: 3px;
  margin: 3px;
  background: #dadada;
}

<div class="container">
  <div class="item special">
    CONTENT #1
    <div>
      Additional Content
    </div>
  </div>
  <div class="item">CONTENT #2</div>
  <div class="item">CONTENT #3</div>
  <div class="item">CONTENT #4</div>
  <div class="item">CONTENT #5</div>
  <div class="item">CONTENT #6</div>
  <div class="item">CONTENT #7</div>
</div>

​

所有我想要的是，与其他内容的第一项是覆盖滚动容器。我想得到这样的东西：

​

​

是否可以使用纯CSS？

PS。在未来，它应该被显示和隐藏，这就是为什么我需要这样一个奇怪的东西。

Answer 1

我希望这段代码能给你一些关于如何解决你的问题的提示。

​

.container {
  width: 400px;
  display: flex;
  align-items: flex-start;
  /*overflow-x: hidden;*/
  overflow-y: overlay;
  
  max-height: 47px;
}

.item {
  white-space: nowrap;
  padding: 3px;
  margin: 3px;
  background: #dadada;
}

.item.special{
     min-height: 100px;
     position: relative;
     overflow: visible;
}

<div class="container">
  <div class="item special">
    CONTENT #1
    <div>
      Additional Content
    </div>
  </div>
 <div class="container">
  <div class="item">CONTENT #2</div>
  <div class="item">CONTENT #3</div>
  <div class="item">CONTENT #4</div>
  <div class="item">CONTENT #5</div>
  <div class="item">CONTENT #6</div>
  <div class="item">CONTENT #7</div>
</div></div>

​