堆叠第二个弹性盒时出现问题答案

【问题标题】：Issue with second flexbox when stacking them堆叠第二个弹性盒时出现问题
【发布时间】：2018-02-24 00:54:24
【问题描述】：

我目前遇到的问题是我的 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>

下图是我最终结果的实例。

任何帮助将不胜感激！

【问题讨论】：

html不包含product-pricediv？

标签： html css sass flexbox

【解决方案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;

        }
    }

}

【讨论】：