Flex Wrap causes items to overflow when decreasing window size

Nazariy1995 Source

I am using Flexbox to create a landing page but am having problem with one of the elements when striking the size of the browser window:

Here it is normally:

Full Size Screen

When decreasing the screen size:

Smaller Screen

As you can see that the images now overflow, even though the parent is a flex box. Each image is wrapped by a div with flex:1; Here is the HTML:

<div class="main-content">
    <div class="tab content-header">This is the Header</div>
    <div class="tab content-occasions">
            <div class="occasion party">
                <img src="assets/party.png">
                <div class="occasion-word">Party</div>
            </div>
            <div class="occasion wedding">
                <img src="assets/Wedding.png">
                <div class="occasion-word">Wedding</div>
            </div>
            <div class="occasion birthday">
                <img src="assets/birthday.png">
                <div class="occasion-word">Birthday</div>
            </div>
            <div class="occasion more">
                <img src="assets/more.png">
                <div class="occasion-word">More</div>
            </div>
    </div>
    <div class="tab content-action">
        <div class="buttons">
            <div class="button button-how">Shop</div>
            <div class="button button-shop-filters">How?</div>
        </div>
    </div>
</div>

Here is the CSS:

.main-content {
    display: flex; 
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content:space-around;
}

.main-content > .tab {
    flex:1;
    margin-right: 10%;
}

.content-occasions {
    flex: 2 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 24px !important;
    justify-content: space-around;
    align-items: center;
}
.content-action {
    flex: 0.8 !important;
}
.content-header {
    flex: 0.8 !important;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif !important;
    font-size: 36px !important;
    line-height: 55px !important;
    color: white;
    display: flex;
    align-items: flex-end;

}

.occasion {
    text-align: center;
    flex: 1;
}
.occasion img {
    max-height:100%;
    max-width: 80%;
    height: auto;
    min-width: 140px;
}

I tried many different approaches. If content-occasions is not set a display:flex then it stretches to fit the content and then the header and the buttons are out of view. Please help! I need to make sure that the images don't overflow, and instead take up the remaining space. I am a beginner with Flexbox! Thank You!

htmlcsscss3flexbox

Answers

comments powered by Disqus