html - 获取具有绝对位置的父元素的子元素的宽度

Question

允许子元素根据文本的长度进行扩展以拥有自己的宽度，而不受父元素的宽度限制的限制，如您在本附图中所见。 /image/uZ0JN.png

<ul id="nav">
  <li>
    <span>Solutions</span>
    <div class="sub-cont">
      <ul class="sub-nav">
        <li><a href="#">New Seller Suite</a></li>
        <li><a href="#">Pro Seller Suite</a></li>
        <li><a href="#">Advanced Seller Suite</a></li>
        <li><a href="#">Assisted Seller Suite</a></li>
        <li><a href="#">Managed Seller Suite</a></li>
      </ul>
    </div>
  </li>
</ul>


 ul#nav {
  display: flex;
  > li {
    position: relative;
    display: block;
    margin: 0px 28px;

    .sub-cont {
      height: 0%;
      position: absolute;
      top: 40px;
      left: -20px;
      width: 100%;

      ul.sub-nav {
        padding: 20px 20px 12px 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 4px 5px 5px rgba(0, 0, 0, 0.12);
        transform: translateY(5px);
        opacity: 0;
        visibility: hidden;
        /* autoprefixer: off */
        transition-property: opacity, transform, visibility;
        transition-duration: 600ms, 900ms, 300ms;
        transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1),
        cubic-bezier(0.23, 1, 0.32, 1), linear;
      }
    }
  }
}

Answer 1

所以你想要脱离父元素的元素你可以使用:
宽度:自动；空白:nowrap； <<--- 这就是插入容器扩展内容宽度的原因