如何让更广泛的名单中的孩子从他们绝对定位的父母身上溢出？

Question

我有一个包含动态填充项的列表，我需要它比它绝对定位的父项更宽（它是一个自定义的<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）。我怎样才能做到这一点？这是一个Codepen：https://codepen.io/montrealist/pen/VrrYem

Answer 1

你可以这样做：

• 在display:flex
中使用inline-flex代替#testContainer
• 使用width: calc(50vw - 50%)
• [平板电脑/手机可选] - 使用left:-50%和width: calc(100vw - 50%)
• 在flex: 1
中使用width:200px代替.testIem
• 避免重叠字母（至少在IE中）使用word-wrap: break-word

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

#testContainer {
  display: flex;
  position: absolute;
  right: 0;
  background-color: fuchsia;
  list-style: none;
  padding: 0;
  border: 5px dashed orange;
  width: calc(50vw - 50%)
}

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

.testItem {
  flex: 1;
  height: 50px;
  background-color: #aaa;
  word-wrap: break-word
}

@media (max-width: 800px) {
  #testContainer {
    right: auto;
    left: -50%;
    width: calc(100vw - 50%)
  }
}

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

Answer 2

除非我理解这个错误，否则我只想添加一个overflow-x：auto;到#testContainer的css。

这样就可以按照用户的方式完全查看列表项，只需要用户滚动即可。

所以只是：

#testContainer {
  display: flex;
  position: absolute;
  right: 0;
  background-color: fuchsia;
  list-style: none;
  overflow-x: auto; /* Added this here */
  padding: 0;
  border: 5px dashed orange;
  width: calc(50vw - 50%)
}

Answer 3

正如我们的祖父教导我们的那样，让我们​​在没有弹性的情况下工作！

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;