CODEWITHSUNDEEP
cssflexbox
Tayfun
Tayfun

Reputation: 65

flex shrink not working vertically

You can see the full code here:https://codepen.io/typhoon93/pen/zabzyz/

I have created a flex container with class: contact-details-links

The links inside it are with class "profile-link" and they have set height and width, and flex shrink property explicitly set to: 1; Below is the full code:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contact-details-links{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    border: 1px solid green;
    height:300px;
    }
.profile-link{
    border: 1px black solid;
    height:200px;
    width: 300px;
    flex-shrink:1;
}

When you start to decrease the widht of the page so the "profile-link" boxes begin to overflow, they are not shrinking. I've searched for the last hour but couldn't find anything that can help me here.

Anyone has an idea how to fix this?

If I remove the height property the items shrink fine, so my guess is there's something I don't know about vertically shrinking these items.

Upvotes: 5

Views: 6319

Answers (1)

Tayfun
Tayfun

Reputation: 65

Temani answered my question in his comment, basically what I want is not really possible with just flex shrink property - it only works in the direction of the main axis - i.e. since my flex is set with direction: row, it only shrinks my item horizontally.

The question is answered, I will do what I want to do with additional code(media queries) or maybe change my desired outcome.

Thanks to everyone for their answers.

Upvotes: 2

Related Questions