我怎样才能让更广泛的孩子从他们绝对定位的父母中溢出？答案

【问题标题】：How can I make wider list children spill out of their absolutely-positioned parent?我怎样才能让更广泛的孩子从他们绝对定位的父母中溢出？
【发布时间】：2017-11-21 22:58:20
【问题描述】：

我有一个包含动态填充项的列表，我需要它比其绝对定位的父项更宽（这是一个自定义的 <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

【问题讨论】：

你为什么要尝试这种方法？为什么我们要尝试使用可能更大的项目来打破元素的宽度？为什么不让父容器对添加到页面的所有元素都灵活。特别是如果它不可见/透明。
@AndrewIce 需要在视觉上控制标签宽度，但同时将所有子 li 项目并排显示给用户。这是一个硬性要求。

标签： html css internet-explorer-11

【解决方案1】：

你可以这样做：

在#testContainer 中使用display:flex 而不是inline-flex
使用width: calc(50vw - 50%)
[平板电脑/移动设备可选] - 使用 left:-50% 和 width: calc(100vw - 50%)
在.testIem 中使用flex: 1 而不是width:200px
为了避免重叠的字母（至少在 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>

【讨论】：

【解决方案2】：

我们的祖父教给我们的，让我们在没有弹性的情况下工作！

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

【讨论】：

【解决方案3】：

除非我理解错了，否则我会简单地添加一个 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%)
}

【讨论】：

抱歉，不够好 - 用户必须水平滚动才能在 <select> 元素中选择一个答案（或多个答案）。