在子元素上使用％width（但是使百分比基于前/外父元素）

Question

我正在制作一个响应式导航并遇到一个小问题，我正在使用SASS进行记录....

任何人都知道我可以根据当时用户视口的宽度或外部外部父级的宽度来使子元素的百分比宽度...见下文...

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

正如我所说，它可以是基于视口的百分比宽度，也可以是其他一个外部父项。

HTML布局的屏幕截图：

谢谢你们， 基兰

Answer 1

这样的东西？

.parent{
  width = 90vw;

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

查看示例而不将值设置为父宽度

.oldParent {
  margin: 0 auto;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 50%; #this will be 50% of the parent width, no matter what width the parrent has"
 }

<div class="oldParent">
 <div class="parent">
   <div class="child">
     Child 1
   </div>
   <div class="child">
     Child2
   </div>
   <div class="child">
    Child 3
   </div>
 </div>
</div>

Answer 2

如果你知道.parent使用.outer-parent空间的空间，你可以这样做。

.parent {
    width: 50%;

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