html - 调整内容 : space-between not applying on nested flex box

Question

我正在设计 Angular 购物车。我试图让价格一直位于购物车的右侧，但它不适用。

我尝试使用 space- Between 并在外部 div 上测试了它并且它有效，但是当我尝试应用于内部 div 时它不起作用。我在这里错过了什么或者只是不明白什么？

这里是一笔代码 https://codepen.io/awschneider-dev/pen/rNedLJg

下面的 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>

CSS 下面

div.item{
    display: flex;
    
}

div.information{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

div.container{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

div.itemImage{
    min-width: 150px;
}

img.productImage{
    max-width: 100px;
    max-height: 150px;
    margin: 10px;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1.0em;
    margin-right: 1.0em;
    border-style: inset;
    border-width: 1px;
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
  } 

  a.fakeLink{
      font-weight: 750;
      font-size: larger;
      text-decoration: none;
      color: #0645AD;
  }

我在下面访问的资源。

How to fix flex box with justify-content space between

Justify-content: space-between works incorrect

任何和所有帮助将不胜感激。

Answer 1

要使其正常工作，您可以设置 div.information 的宽度。

例如:

div.information{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%; /* use any value you want */
}