Justify-content: space-between 不适用于嵌套的弹性盒子

Question

我正在设计一个有角度的购物车。我试图让价格一直到购物车的右侧，但它不适用。

我尝试使用 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 */
}

Answer 2

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

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