绝对定位元素激活滚动

Question

我的标题中有一个下拉菜单（在此示例中始终打开）。当菜单打开时，它会在打开时激活标题滚动。如何在不激活垂直标题滚动条的情况下显示菜单？请注意，我需要在标题上设置overflow-x: hidden，因为如果人们在标题中添加了大量元素，则标题水平滚动不应激活。溢出的元素应该只是水平隐藏。

body{
  padding: 0;
  margin: 0;
}

.container{
  display: flex;
  flex-direction: column;
}

.header{
  padding: 12px;
  flex: 0 0 75px;
  background: yellow;
  overflow-x: hidden;
}

.content{
  flex: 1 1 auto;
  padding: 12px;
}

.dropdown{
  position: relative;
}

.menu{
  padding: 12px;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="header">
    <div class="dropdown">
      <button>Dropdown</button>
      <div class="menu">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae.
  </div>
</div>

例如： stackoverflow下拉列表：打开时，下拉菜单显示在标题上，而标题没有滚动条。我想要这样的事情发生：

Answer 1

您的问题是，通过设置overflow-x，您将为整个元素设置溢出属性。即使您没有专门设置溢出，这也会导致容器启用滚动条，即使您的菜单是绝对定位的。

您必须删除overflow-x属性才能解决此问题。

我之所以会引用@ JamesKhoury对this question的回答：

  

如果您对overflow-x或overflow-y使用可见，而对另一个使用不可见。可见值被解释为自动。

您也可以通过这种方式查看this analysis哪些组合导致问题。

修改
由于该帖子的下注可能是因为问题指定需要overflow-x，所以让我再次声明无法从具有溢出属性的元素中以所述方式显示绝对定位元素。从这一点开始，您可以决定是否废弃溢出属性或整个菜单，前者显然更容易解决。

Answer 2

这样的东西？

滚动条是由overflow-x引起的，删除溢出会删除滚动条。

body {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
}
.header {
  padding: 12px;
  flex: 0 0 75px;
  background: yellow;
}
.content {
  flex: 1 1 auto;
  padding: 12px;
}
.dropdown {
  position: relative;
}
.menu {
  padding: 12px;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="header">
    <div class="dropdown">
      <button>Dropdown</button>
      <div class="menu">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae.
  </div>
</div>