Overflow-X是滚动，同时Overflow-Y是覆盖

Question

想象我有容器

null

css prettyprint-override">.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>

null

我想要的是，第一个带有附加内容的项目覆盖在可滚动容器上。我想要这样的东西：

用纯CSS有可能吗？

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

Answer 1

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

null

.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>