Html 对齐内容：不应用于嵌套flex box之间的间距

我正在设计一辆有棱角的手推车。我试图得到的价格是所有的方式，以正确的购物车，但它不适用

我尝试使用空格between，并在外部div上进行了测试，结果成功了，但当我尝试在内部div上应用它时，却没有成功。我在这里遗漏了什么或只是不明白

这是一支代码笔

下面是HTML

<div class="container">
    <h2>Cart</h2>
    <div class="cartProducts" *ngFor="let item of items">
        <!-- <input type="checkbox" name="deleteItem" id=""> -->
        <hr>
        <div class="item">
            <div class="itemImage">
                <img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
            </div>
            <div class="information">
                <div class="description">
                    <a href="#" class="fakeLink">Link to Item Page</a>
                </div>
                <div class="price">
                    {{item.price | currency}}
                </div>
            </div>
        </div>
    </div>
</div>

我在下面访问的资源

---

任何帮助都将不胜感激。

要使其正常工作，您可以设置

div.information

的宽度

例如：

div.information{
显示器：flex；
证明内容：之间的空间；
弯曲方向：行；
宽度：100%；/*使用您想要的任何值*/
}

在css规则中添加以下属性：

div.information{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-grow: 2; // add this line
}

---

作品谢谢facepalm：瞬间。这也有效。Flex grow属性是否定义了我的flexbox容器中有多少个元素？从

div.information{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-grow: 2; // add this line
}