align-self属性未按预期工作

Question

我正在构建一个条形图组件，我希望能够根据数据集的大小轻松扩展和缩小。因此flex。

将align-self: stretch;应用于.bar.value选择器时，它不会拉伸到父容器的高度。

我在堆栈上查看了与align-self: stretch;相关的类似问题，但似乎没有人出于同样的原因遇到问题。

非常感谢任何帮助。

.bar.graph.container {
  position: relative;
  display: flex;
  width: 100%;
}
.bar.graph.container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  padding-top: 100%;
  outline: 1px solid pink;
}
.bar.value {
  flex: 1;
  align-self: stretch;
  outline: 1px solid orange;
}

<div class="bar graph container">
  <div class="bar value">
  </div>
  <div class="bar value">
  </div>
  <div class="bar value">
  </div>
</div>