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

Question

允许子元素根据文本具有自己宽度的长度进行扩展，而不受父元素宽度限制的限制，如您在此图片中所见。 https://i.stack.imgur.com/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； <<--- 这就是推动容器扩大内容宽度的原因