Css 在子元素上使用%width（但使百分比基于上一个/外部父元素）

我正在进行响应导航，遇到了一个小问题，我正在使用SASS记录

任何人都知道我可以根据当时用户视口的宽度或外部父元素的宽度将子元素设置为百分比宽度的方法…请参见下文

<div class="outer-parent">
  <div class="parent">
    <div class="child">

正如我所说的，它可以是基于视口的百分比宽度，也可以是基于另一个外部父对象的百分比宽度

HTML布局的屏幕截图：

谢谢各位， 基兰是这样的吗

.parent{
  width = 90vw;

  .child {
    width = 50%; //50 % of 90vw.
  }
}

查看一个示例，不将值设置为父宽度

.oldParent{
保证金：0自动；
}
.家长{
显示器：flex；
柔性包装：包装；
}
.孩子{
宽度：50%；#这将是父级宽度的50%，无论该阵列的宽度是多少”
}

儿童1
孩子2
儿童3

如果您知道

.parent

使用了

.outer parent

多少空间，您可以这样做

.parent {
    width: 50%;

    .child {
        width: percentage(30 / 50);
        /* 30% of .outer-parent == 60% of .parent */
    }
}

---

如果将父元素设置为30%宽度，则将子元素设置为50%将是父元素30%的一半。@ValentinoKožinec Yep但我希望功能是…整个视口的外部父元素100%（因此在我的示例中是导航容器）…父元素是导航项（因此将有多个导航项的宽度为auto）（意味着这些内容将决定宽度）…然后是子项（作为下拉菜单）应该是整个页面或外部父项的百分比宽度。请参考此问题，我希望避免在父项上使用设置宽度，因为我当前使用flex，所以我的宽度设置为自动，这是因为此示例中的父项是导航项。然后子项是下拉菜单，我希望成为百分比宽度整个页面或整个导航容器的h。（也很抱歉没有代码示例，因为代码长且复杂，这可能会使问题不那么清楚）但这会起作用，例如，如果你让父对象设置为自动宽度，那么通过设置子对象相对于父对象的宽度，它将采用。否，因为如果我将父对象设置为width=auto，并让父对象中的文本设置为“Home”"，这将使大小大约为20px宽，比如说，自动。然后这意味着如果我将子宽度设置为50%，它将继承20px的宽度，得到50%，这是10px宽。而我希望外部父级的宽度，比如说是500px宽，是它继承的宽度。明白我的意思吗？这让我很困惑，你能给我们提供wi吗我不确定你是否可以将

外部页面的宽度设置为
子页面的宽度，因为它的第一个父页面是
父页面的宽度，它将继承他的宽度。除非你使用
vw
或
javascript
或将其设置为绝对值。但是你为什么不将
子页面的宽度设为
div是
外部家长的
子家长
？