2番目のフレックスボックスを積み重ねる際の問題

Question

現在、私のFlexBoxが入れ子になっている要素をjustify-content: flex-end;とalign-items: flex-start;のプロパティで右端に配置していない問題があります。

下の画像では、大きな灰色のボックスが初期の罫線を収めているpanelクラスにあります。 panelクラスの中には、panel-price-boxがあり、セカンダリボックスを作成して、それを初期ボックスの右上の位置に送信する必要があります。

コードはSCSSです。

CSS：

.product 
{ 
    display: block; 
    position: relative; 
    background: transparent; 
    overflow: hidden; 
    height: 100px; 
    width: 100%; 
    border: $border-small $panel-color; 
    border-radius: $border-radius-small; 

    &-price 
    { 
     display: flex; 
     justify-content: flex-end; 
     align-items: flex-start; 

     &-box 
     { 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      border-left: 1px solid grey; 
      border-bottom: 1px solid grey; 
      border-radius: 0px 0px 0px 5px; 
      height: 25px; 
      width: 100px; 

     } 
    } 

} 

HTML：

<div class="product"> 
    <div class="product-price-box"></div> 
</div> 

下の写真は私の最終的な結果が何であるかの実際の例です。

すべてのヘルプは非常に高く評価されるだろう！

Answer 1

これを試しましたか？

.product 
 
{ 
 
    position: relative; 
 
    background: transparent; 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: 100%; 
 
    border: $border-small $panel-color; 
 
    border-radius: $border-radius-small; 
 
    
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-items: flex-start; 
 

 

 
    &-price 
 
    { 
 
     &-box 
 
     { 
 
      display: flex; 
 
      justify-content: center; 
 
      align-items: center; 
 
      border-left: 1px solid grey; 
 
      border-bottom: 1px solid grey; 
 
      border-radius: 0px 0px 0px 5px; 
 
      height: 25px; 
 
      width: 100px; 
 

 
     } 
 
    } 
 

 
}