如何让更宽的列表子元素溢出其绝对定位的父元素？

Question

我有一个动态填充项的列表，需要比其绝对定位的父元素更宽（这是自定义的元素实现）。 #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

- montrealist

---

你为什么要尝试这种方法呢？我们为什么要尝试通过使用可能更大的项目来打破元素的宽度呢？为什么不只是使父容器对页面上添加的所有元素都具有灵活性。特别是如果它不可见/透明的话。 - Andrew Ice

@AndrewIce 需要在视觉上控制标签的宽度，同时向用户展示所有子li项目并排显示。这是一个严格的要求。 - montrealist

Answer 1

你可以这样做：

• 在 #testContainer 中使用 display: flex 替代 inline-flex
• 使用 width: calc(50vw - 50%)
• [平板/手机可选] - 使用 left:-50% 和 width: calc(100vw - 50%)
• 在 .testItem 中使用 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>

- dippas

Answer 2

除非我理解有误，否则我会在您的#testContainer的CSS中简单地添加overflow-x: auto;。

这将允许用户滚动查看列表项，以便完全查看它们。

所以只需：

#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%)
}

- Andrew Ice

---

抱歉，这样不够好 - 用户将不得不水平滚动以选择在<select>元素中的一个或多个答案。 - montrealist

Answer 3

让我们不使用 flex，像我们的祖先教导我们的那样工作！

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

- Ruslan