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

Question

我制作了一个包含大量项目的下拉菜单（我不知道确切的数量）。

我希望孩子<ul>在有足够的商品时展开到max-width，但实际上它只会展开到父<div> width，不会更多。

为什么？

Upd ：我希望打破长线，而不是按flex缩小它们。

Upd 2 ：我希望孩子<ul>不小于父<div>。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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 - 但这不会尊重你的最大宽度：

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>

Answer 2

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

您可以使用

display: flex;

Answer 3

max-width的原则。您强制项目永远不会大于指定的单位，但这并不意味着您的元素将永远达到该长度。在这种情况下，绝对定位的<ul>仍然仅限于它的初始父级，这会强制它最长为200px。

Answer 4

FWIW：尚未提及的其他选项：

使用内在大小调整宽度：

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

来自the spec：

  

max-content 如果为内联轴指定，请使用max-content内联大小;否则计算到自动。

NB：您可以将max-width: 500px与width属性结合使用，以确保内容宽度不会超过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>

Browser Support也很不错（IE / Edge除外）

Answer 5

你想要这样的东西吗？我将width: 200px的{​​{1}}更改为div并删除了max-width:500px中的max-width:500px

ul

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