flex item shrink to min-width before wrapping to new line

Question

I am having an issue getting flex items to shrink inside the flex container until a min-width is reached and then wrap. I have it working in a basic codepen but I cannot get it to work in some production angular code.

//angular component    
<div class="container"> 
        <div class='item" [ngStyle]={minWidth: calc((100vw - 20px) / 3}, maxWidth: 'calc((100vw - 20px) / 2}'>
         
        </div>
    </div>

//css
    .container { 
        height: calc(100vh - 50px - 40px - 10px);
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
    }

    .item {
        min-width: calc((100vw - 20px) / 3);
        max-width: calc((100vw - 20px) / 2);
        max-height: 100%;
        min-height: 50%;
        display: inline-block;
        vertical-align: top;
        background-color: #262626;
        border-right: 1px solid #353535;
        text-align: center;
        color: white;
        -webkit-box-flex: 1;
        flex: auto;
    }

Doing some research I found that when you use flex-wrap: wrap, wrapping takes priority over item shrinking. That is the behavior I am seeing with my angular component. Two flex items take up 50% of their container but when a 3rd is added instead of shrinking it wraps to a new line. Without flex-wrap set adding a 3rd item causes all items to shrink to the min-width.

In the codepen however 3 items shrink to fit and only after a 4th item is added do the items begin to wrap.

Answer 1

The default margin on the body is messing up your layout. Just set the body margin to 0 and you are good to go.

Alternatively, you can set the width of your .container to 100vw instead of 100% .

I don't think that the angular directives or anything else is causing your layout to break.

You can check my pen with the above edits here