我如何使div的宽度响应div的宽度上面几个父级？

Question

<div class="navrow1">
  <div class="dropdown">
    <li class="dropbtn"><a href="">content</a>
    </li>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <li class="dropbtn"><a href="">content</a>
    </li>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <li class="dropbtn"><a href="">content</a>
    </li>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <li class="dropbtn"><a href="">content</a>
    </li>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown">
    <li class="dropbtn"><a href="">content</a>
    </li>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

嗨，我不确定这是不是可能，但是我可以说有一个容器div，嵌套几个div级别，然后以某种方式使最嵌套的div的宽度反应％主要的div？

例如，使用上面的HTML，有没有办法让“dropdown-content”类具有，例如，主“navrow1”div的宽度的50％？

怎么可能这样做？

更直接地说，它是一个带有每个项目下拉菜单的导航栏，我希望“下拉内容”（选择导航项时出现的框）占据整个navbar1的50％。我设置的任何宽度都会转到它当前拥有和需要的父类。

也很抱歉如果这个问题出现了什么问题我是新手，所以请告诉我我做错了所以我可以纠正它。

Answer 1

idk为什么我之前没有想到它，但我只是用vw单位设置宽度。