如何强制子元素扩展父元素？

Question

我用许多项目创建了一个下拉菜单(我不知道确切的数量)。

我希望当子元素<ul>有足够多的项目时，它可以根据max-width自动扩展，但实际上它只会扩展到父元素<div>的width，而不会超过。

为什么？

更新：我想要换行，而不是用flex缩小它们。

更新2：我希望子元素<ul>不要小于父元素<div>。

div {
  background: aquamarine;
  height: 50px;
  position: relative;
  width: 200px;
}

ul {
  background: blue;
  list-style-type: none;
  margin: 0;
  max-width: 500px;
  padding: 5px;
  position: absolute;
  top: 100%;
}

li {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

a {
  background: red;
  color: white;
  display: inline-block;
  margin: 5px;
  width: 30px;
}

<div>
  <ul>
    <li>
      <a>A</a>
      <a>B</a>
    </li>
    <li>
      <a>A</a>
      <a>B</a>
      <a>C</a>
      <a>D</a>
      <a>E</a>
      <a>F</a>
      <a>G</a>
      <a>H</a>
      <a>I</a>
    </li>
  </ul>
</div>

- Ruslan

Answer 1

您可以将相对定位移动到足够宽以处理500像素的父元素：

div.wide-load {
  width: 500px;
  position: relative;
}

div.direct-parent {
  background: aquamarine;
  height: 50px;
  width: 200px;
}

ul {
  background: blue;
  list-style-type: none;
  margin: 0;
  max-width: 500px;
  padding: 5px;
  position: absolute;
  top: 100%;
}

li {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

a {
  background: red;
  color: white;
  display: inline-block;
  margin: 5px;
  width: 30px;
}

<div class="wide-load">
  <div class="direct-parent">
    <ul>
      <li>
        <a>A</a>
        <a>B</a>
      </li>
      <li>
        <a>A</a>
        <a>B</a>
        <a>C</a>
        <a>D</a>
        <a>E</a>
        <a>F</a>
        <a>G</a>
        <a>H</a>
        <a>I</a>
      </li>
    </ul>
  </div>
</div>

如果您无法做到这一点，那么您唯一的选择是使li的white-space:nowrap - 但这将不会考虑您的max-width。

div.direct-parent {
  background: aquamarine;
  position: relative;
  height: 50px;
  width: 200px;
}

ul {
  background: blue;
  list-style-type: none;
  margin: 0;
  max-width: 500px;
  padding: 5px;
  position: absolute;
  top: 100%;
}

li {
  background: yellow;
  margin: 5px;
  padding: 5px;
  white-space: nowrap;
}

a {
  background: red;
  color: white;
  display: inline-block;
  margin: 5px;
  width: 30px;
}

<div class="direct-parent">
  <ul>
    <li>
      <a>A</a>
      <a>B</a>
    </li>
    <li>
      <a>A</a>
      <a>B</a>
      <a>C</a>
      <a>D</a>
      <a>E</a>
      <a>F</a>
      <a>G</a>
      <a>H</a>
      <a>I</a>
    </li>
  </ul>
</div>

- Pete

---

你的第一种选项对我来说相当不错；如果没有人提供更好的解决方案，而且不需要额外的“div”，我会使用它。谢谢。 - Ruslan

@Sam，你不需要额外的div - 它只是向你展示了一个宽度足够为500px的父元素 - 如果你想要，甚至可以到达body - https://jsfiddle.net/25p0871f/ （使用任意数量的父div：https://jsfiddle.net/25p0871f/1/） - Pete

这几乎是完美的；但是如果我想让子元素<ul>不小于父元素<div>怎么办？ - Ruslan

在那个上面加一个最小宽度为200像素？ - Pete

那么现在你需要js，因为你已经将ul从父级div的流中移除了 - 但如果它比文档的宽度小，则必须在其上设置宽度，所以你应该知道宽度。 - Pete

Answer 2

li {
    background: yellow none repeat scroll 0 0;
    display: flex;
    margin: 5px;
    padding: 5px;
}

你可以使用

标签。

display: flex;

- Sudik Maharana

---

Flex工作得很好，但我想要换行而不是缩小它们。 - Ruslan

Answer 3

这是关于max-width的原则。你强制一个项目永远不会比指定的单位更大，但这并不意味着你的元素将自动达到该长度。在这种情况下，您的绝对定位的<ul>仍然受限于其初始父级，这迫使它最多只能长达200px。

- roberrrt-s

---

这要看情况，你希望你的第一个<ul>保持最初的200像素宽度吗？ - roberrrt-s

是的，我做。<ul> 必须不小于父级 div。 - Ruslan

Answer 4

顺便提一下：还有一个未被提及的额外选项：

使用内在尺寸来确定宽度：

ul {
  ...
  width: max-content;
  max-width: 500px;
  ...
}

来自规范：

max-content 如果在内联轴上指定，则使用最大内容内联尺寸；否则计算为自动。

NB：您可以将max-width: 500px与宽度属性一起使用，以确保内容宽度永远不会超过500px（max-width将覆盖width）。

div {
  background: aquamarine;
  height: 50px;
  position: relative;
  width: 200px;
}

ul {
  background: blue;
  list-style-type: none;
  margin: 0;
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  max-width: 500px;
  padding: 5px;
  position: absolute;
  top: 100%;
}

li {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

a {
  background: red;
  color: white;
  display: inline-block;
  margin: 5px;
  width: 30px;
}

<div>
  <ul>
    <li>
      <a>A</a>
      <a>B</a>
    </li>
    <li>
      <a>A</a>
      <a>B</a>
      <a>C</a>
      <a>D</a>
      <a>E</a>
      <a>F</a>
      <a>G</a>
      <a>H</a>
      <a>I</a>
      <a>A</a>
      <a>B</a>
      <a>C</a>
      <a>D</a>
      <a>E</a>
      <a>F</a>
      <a>G</a>
      <a>H</a>
      <a>I</a>
    </li>
  </ul>
</div>

浏览器支持也相当不错（除了IE/Edge）

- Danield

---

工作得很好，但我更喜欢一个支持IE的解决方案。 - Ruslan

Answer 5

你想要这样的效果吗？我将 div 的 width: 200px 改为了 max-width:500px，并且移除了 ul 中的 max-width:500px。

div {
  background: aquamarine;
  height: 50px;
  position: relative;
  max-width: 500px;
}

ul {
  background: blue;
  list-style-type: none;
  margin: 0;
  padding: 5px;
  position: absolute;
  top: 100%;
}

li {
  background: yellow;
  margin: 5px;
  padding: 5px;
}

a {
  background: red;
  color: white;
  display: inline-block;
  margin: 5px;
  width: 30px;
}

<div>
  <ul>
    <li>
      <a>A</a>
      <a>B</a>
    </li>
    <li>
      <a>A</a>
      <a>B</a>
      <a>C</a>
      <a>D</a>
      <a>E</a>
      <a>F</a>
      <a>G</a>
      <a>H</a>
      <a>I</a>
      <a>E</a>
      <a>F</a>
      <a>G</a>
      <a>H</a>
      <a>I</a>
    </li>
  </ul>
</div>

- Carl Binalla

---

不，我希望 div 仍然是200像素，而 ul 扩展到500像素。 - Ruslan