css - 如何强制子元素展开父元素？

Question

我做了一个下拉菜单，里面有很多元素(我不知 Prop 体有多少)。

我期待 child <ul>扩展到 max-width当它有足够的元素时，但实际上它扩展到父级 <div>的 width仅此而已。

为什么？

Upd:我想打断长行，而不是将它们缩小 flex .

更新 2:我想要 child <ul>不小于 parent <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>

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

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>