溢出x：隐藏导致垂直滚动条

Question

我的问题是，当我定义 时overflow-x:hidden，它会创建一个不需要的滚动条。

我正在努力实现与这个问题类似的目标。

我已经尝试了那里建议的解决方案，但没有成功。下面是我的代码：

CSS 和 HTML：

.wrapper {
  margin-top: 50px;
}

.menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow-x: hidden;
}


.submenu {
  background: #E0E0E0;
  height: 100px;
  width: 50px;
}

.menu_list {
  width: 300px;
}

<body>
  <div class="wrapper">
    <div class="menu_container">
      <div class="menu_list" align="left">
        Menu 1 Menu2 Menu 3
      </div>
      <div class="submenu">
        sub
      </div>
    </div>
  </div>
</body>

这是JSFiddle链接。

Answer 1

overflow-x: clip;实际上为我解决了这个问题。

clip：[...]clip 和hidden 之间的区别在于clip 关键字还禁止所有滚动，包括编程滚动。[...]

来自： https: //developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 2

我看到有两种方法可以实现你的目标：

1.设置.menu_container的高度为auto

HTML 保持原样，CSS 如下：

.wrapper {
margin-top: 50px;
}

.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: auto; /* NEW */
overflow-x:hidden;
}

.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
display: none; /* I added this to show the effect when .submenu is invoked */
}

.menu_container:hover .submenu {
display: block; /* I added this to show the effect when .submenu is invoked */
}

.menu_list {
width: 300px;
}

只需将鼠标悬停在.menu_container上：FIDDLE

此解决方案将使 .menu_container 增长，因此当显示.submenu时，其余内容会被下推。

2. 将.submenu包裹在一个单独的 DIV 中并将其绝对定位

使用此方法，.menu_container 将不会增长，因此以下内容将保留在原来的位置。

HTML：

<body>
 <div class="wrapper">
  <div class="submenu_container"> <!-- NEW -->
   <div class="menu_container">
    <div class="menu_list" align="left">
     Menu 1 Menu2 Menu 3
    </div>
   </div>
   <div class="submenu">
    sub
   </div>
  </div>
 </div>
</body>

CSS：

  .wrapper {
   margin-top: 50px;
  }

  .menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow: hidden;
  }

  .submenu_container { /* NEW */
  position: relative;
  }

 .submenu {
 background: #E0E0E0;
 height: 100px;
 width: 50px;
 position: absolute; /* NEW */
 left: 20px; /* Adjust to your needs */
 top: 40px; /* Adjust to your needs */
 }

 .menu_list {
 width: 300px;
 }

参见小提琴