堆叠时第二个flexbox出现问题

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;

        }
    }

}