hpcsolo hpcsolo - 29 days ago 7
Sass (Sass) Question

Issue with second flexbox when stacking them

I'm currently having an issue where my FlexBox is not positioning my nested element all the way to the right with the

justify-content: flex-end;
and
align-items: flex-start;
properties.

In the picture below, the big grey box is in
panel
class which houses the initial borders. Within the
panel
class is the
panel-price-box
which should create a secondary box and send it to the top right position of the initial box.

The code is in 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>


The picture below is the live example of what my end result is.

End result is linked here

Any help would be very much appreciated!

Answer Source

Did you try this?

.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;

        }
    }

}