Html CSS：下拉菜单被容器隐藏'；s溢出特性

我正在编辑一个包含大量现有代码的大型项目，因此我无法更改表结构的HTML，但我可以更改CSS。
很多内容很长，目的是在内容溢出时使

.container

从左向右滚动。
在下面的代码笔中，如果您将

.container

的

overflow-x

属性更改为

auto

或

scroll

（我希望它这样做），则由“单击我”链接触发的下拉菜单仅显示容器内的内容，并剪辑容器外的任何内容。有没有办法绕过这个

正文{
背景颜色：粉红色；
}
.集装箱{
边缘顶部：100px；
高度：150像素；
宽度：100%；
背景颜色：灰色；
溢出x:inherit；
最大高度：150像素；
}
运输署{
字体大小：30px；
}
傅先生{
颜色：红色；
}
.下拉菜单{
右：20px；
顶部：-30px；
位置：绝对位置；
z指数：2147483549；
}
tr:n第n个子（1）td.下拉菜单{
顶部：-30px！重要；
}
tr:n最后一个子（-n+2）td.下拉菜单{
顶部：-165px；
}
a、 下拉开关{
位置：绝对位置；
z指数：999；
右：20px；
}
.open>.dropdown-toggle.btn-bitbucket{
颜色：#ffffff；
背景色：#163758；
边框颜色：rgba（0,0,0,0.2）；
}

选择1
点击









选择3
选择4
选择5
选择6
选择7
选择8
选项9
选择10
选择11
选择12
选择13
选择14

您好，我不知道您到底想要什么，我提出了一个解决方案，就是不知道它能解决您的问题，请更改下面的css并尝试。如果没有如你所期望的那样工作，请表示感谢和抱歉

.container {
  margin-top:100px;
  height: 150px;
  width: 100%;
  background-color:grey;
  overflow-x: auto;
  max-height: 150px;
}
td {
  font-size: 30px;
  vertical-align:top;
}
tr:nth-child(1) td .dropdown-menu {
  top: 0 !important;
}
.dropdown-menu{
  right:20px;
  top:0;
  position: relative !important;
  z-index: 2147483549;
  transform: none !important;
}

---

嗨，我不知道你到底想要什么，我提出了一个解决方案，就是不知道它能解决你的问题，请在下面更改css并尝试。如果没有如你所期望的那样工作，请表示感谢和抱歉

.container {
  margin-top:100px;
  height: 150px;
  width: 100%;
  background-color:grey;
  overflow-x: auto;
  max-height: 150px;
}
td {
  font-size: 30px;
  vertical-align:top;
}
tr:nth-child(1) td .dropdown-menu {
  top: 0 !important;
}
.dropdown-menu{
  right:20px;
  top:0;
  position: relative !important;
  z-index: 2147483549;
  transform: none !important;
}

---

因此，您需要的是选择选项列表，根据屏幕大小动态列出div中的其余隐藏内容。我说的对吗？请尝试：

transform:none

on'.dropdown menu'类因此，您需要的是选择选项列表，根据屏幕大小动态列出div中的其余隐藏内容。我说的对吗？请尝试：

transform:none打开“.下拉菜单”类