html - 我如何才能使名单更广的 child 从绝对定位的 parent 中流出来？

我有一个包含动态填充项的列表，我需要它比绝对定位的父级更宽（它是一个自定义的<select>元素实现）。

#wrapper {
    position: relative;
    border: 1px dashed black;
    width: 300px;
    margin: 0 auto;
}

#testContainer {
    display: inline-flex;
    position: absolute;
    right: 0px;
    background-color: fuchsia;
    list-style: none;
    padding: 0;
    border: 5px dashed orange;
}

#testLabel {
    width: 300px;
    background-color: yellow;
}

.testItem {
    width: 200px;
    height: 50px;
    background-color: #aaa;
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
  <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

除了IE11（屏幕截图2），它在任何地方都可以工作（屏幕截图1）。我怎样才能做到这一点？这是一个密码笔：https://codepen.io/montrealist/pen/VrrYem

最佳答案

让我们没有弹性工作，就像我们的祖父教我们的那样！

#wrapper {
  border: 1px dashed black;
  margin: 0 auto;
  position: relative;
  width: 300px;
}
#testLabel {
  background: yellow;
}
#testContainer {
  background: fuchsia;
  border: 5px dashed orange;
  font-size: 0;
  list-style: none;
  padding: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
}
.testItem {
  background: #aaa;
  display: inline-block;
  font-size: 16px;
  height: 50px;
  min-width: 200px;
}

<div id="wrapper">
  <div id="testLabel">label</div>
  <ul id="testContainer">
    <li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
    <li class="testItem">www</li>
    <li class="testItem">cccccccccccccccccc</li>
  </ul>
</div>

关于html - 我如何才能使名单更广的 child 从绝对定位的 parent 中流出来？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47337883/