在firefox中将高度调整为容器的100％宽度

Question

我试图得到一个方形的div，其边等于容器的宽度。我通过在我的div中添加伪元素来实现这一点，感谢这个论坛：

<div id="particles-js"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.js" defer="defer"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

它适用于chrome但不适用于Firefox。我没有想法。

Answer 1

这适用于Firefox，psuedo-element需要宽度。我添加了背景颜色和高度/宽度，因此您可以看到它正在帮助。

.helper::before {
 content:'';
 padding-top: 100%;
 width: 5px;
 background: blue;
 float:left;
}

.helper{
 background: red;
 height: 50px;
 width: 50px;
}

https://codepen.io/BenKingstown/pen/mXrbZK

Answer 2

这是你想要的吗？

如果你给我更多信息，我会编辑...

.container {
  margin: 0 auto;
  height: 500px;
  border: 1px solid black;
  width: 50vw;
}
.square {
  display: flex;
  border: 1px solid red;
  width: 100%;
}
.helper {
  overflow: hidden;
  height: 100%;
}

<div class="container">
  <div class="square helper">
    dfgdf
  </div>
</div>