第二個柔性盒堆疊時發出的問題

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; 
 

 
     } 
 
    } 
 

 
}