Mira
Mira

Reputation: 13

How do I get the green cards to fit within the red area using css and html?

I need the green cards that have overflow the red area to fit within the red area. Is there some way to get the rest to be divided into seperate rows that fit within the red area? Screenshot1: Screenshot2:

HTML:

<div class="dash-card">
        <div class="navbar">
            <div class="section-1">
                <div class="nav-menu-1">
                    <div class="nav-menu-1-left"><a href="/"><img src="{{ url_for('static', filename='img/bulk/logo-notext (1).png') }}"></a></div>
                    <div class="nav-menu-1-right">DFL</div>
                </div>
            </div>
            <div class="section-2">
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Dashboard</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-chart-pie fa-lg"></i></div>
                    <div class="nav-menu-2-right">Charts</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-magnifying-glass fa-lg"></i></div>
                    <div class="nav-menu-2-right">OSINT</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Title 3</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Title 4</div>
                </div>
            </div>
            <div class="section-3">
                <div class="nav-menu-3">
                    <div class="nav-menu-3-left"><i class="fa-solid fa-upload fa-lg"></i></div>
                    <div class="nav-menu-3-right">Upload</div>
                </div>
            </div>
        </div>
        <div class="right-subcard">
            <div class="mini-card-container">
                {% for file in clean_files_list %}
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

CSS:

body{
    margin: 0;
    padding: 0;
    background-color: #121212;
}
.dash-card{
    width: 95vw;
    background-color: #21272f;
    height: 95vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 1rem;
    display: flex
}
.navbar{
    width: 15%;
    height: 100%;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    background-color: #48bd9d;
    color: #21272f;
    margin: 0;
    padding: 0;
}
.nav-menu-1{
    width: 100%;
    display: flex;
    align-items: center;
}

.nav-menu-2{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
    padding: .4rem .4rem;
    transition: .2s ease-in-out;
}
.nav-menu-3{
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .4rem .4rem;
    transition: .2s ease-in-out;
}

.nav-menu-1 img{
    width: 3.5rem;
}

.nav-menu-1-right{
    font-weight: 800;
    padding-left: 1rem;
    font-size: 1.5rem;
}

.nav-menu-2-right{
    padding-left: 1rem;
}

.nav-menu-3-right{
    padding-left: 1rem;
}

.nav-menu-1-left{
    padding-left: 1.5rem;
}

.nav-menu-2-left{
    padding-left: 1.5rem;
}

.nav-menu-3-left{
    padding-left: 1.5rem;
}
.section-1{
    padding-top: 1rem;
    margin-top: -3rem;
}
.section-2{
    margin-top: -5rem;
    width: 100%;
}
.section-3{
    width: 100%;
    margin-bottom: -4rem;
}
.nav-menu-2:hover{
    background-color: #21272f;
    color: #48bd9d;
}
.nav-menu-3:hover{
    background-color: #21272f;
    color: #48bd9d;
}
.right-subcard{
    background-color: red;
    width: 85%;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: .5rem;
}
.mini-card-container{
    background-color: blue;
    display: flex;
}
.mini-card{
    background-color: #48bd9d;
    padding: 1rem;
    border-radius: .5rem;
    display: block;
    margin: .3rem;
    cursor: pointer;
    transition: .2s ease-in-out;
    border: solid .15rem #21272f;
}
.mini-card:hover{
    background-color: #21272f;
    color: #48bd9d;
    border: solid .15rem #48bd9d;
}

I tried using grid to fit them in, but that would make them ugly since the green cards won't be close to each other with grid. I need it to look close to each other like how the green cards in the blue box looks.

Upvotes: 1

Views: 51

Answers (1)

Ali Sattarzadeh
Ali Sattarzadeh

Reputation: 3577

Yes, simply add flex-wrap:wrap to .mini-card-container

body{
    margin: 0;
    padding: 0;
    background-color: #121212;
}
.dash-card{
    width: 95vw;
    background-color: #21272f;
    height: 95vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 1rem;
    display: flex
}
.navbar{
    width: 15%;
    height: 100%;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    background-color: #48bd9d;
    color: #21272f;
    margin: 0;
    padding: 0;
}
.nav-menu-1{
    width: 100%;
    display: flex;
    align-items: center;
}

.nav-menu-2{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
    padding: .4rem .4rem;
    transition: .2s ease-in-out;
}
.nav-menu-3{
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .4rem .4rem;
    transition: .2s ease-in-out;
}

.nav-menu-1 img{
    width: 3.5rem;
}

.nav-menu-1-right{
    font-weight: 800;
    padding-left: 1rem;
    font-size: 1.5rem;
}

.nav-menu-2-right{
    padding-left: 1rem;
}

.nav-menu-3-right{
    padding-left: 1rem;
}

.nav-menu-1-left{
    padding-left: 1.5rem;
}

.nav-menu-2-left{
    padding-left: 1.5rem;
}

.nav-menu-3-left{
    padding-left: 1.5rem;
}
.section-1{
    padding-top: 1rem;
    margin-top: -3rem;
}
.section-2{
    margin-top: -5rem;
    width: 100%;
}
.section-3{
    width: 100%;
    margin-bottom: -4rem;
}
.nav-menu-2:hover{
    background-color: #21272f;
    color: #48bd9d;
}
.nav-menu-3:hover{
    background-color: #21272f;
    color: #48bd9d;
}
.right-subcard{
    background-color: red;
    width: 85%;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: .5rem;
}
.mini-card-container{
    background-color: blue;
    display: flex;
    flex-wrap:wrap;
}
.mini-card{
    background-color: #48bd9d;
    padding: 1rem;
    border-radius: .5rem;
    display: block;
    margin: .3rem;
    cursor: pointer;
    transition: .2s ease-in-out;
    border: solid .15rem #21272f;
}
.mini-card:hover{
    background-color: #21272f;
    color: #48bd9d;
    border: solid .15rem #48bd9d;
}
<div class="dash-card">
        <div class="navbar">
            <div class="section-1">
                <div class="nav-menu-1">
                    <div class="nav-menu-1-left"><a href="/"><img src="{{ url_for('static', filename='img/bulk/logo-notext (1).png') }}"></a></div>
                    <div class="nav-menu-1-right">DFL</div>
                </div>
            </div>
            <div class="section-2">
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Dashboard</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-chart-pie fa-lg"></i></div>
                    <div class="nav-menu-2-right">Charts</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-magnifying-glass fa-lg"></i></div>
                    <div class="nav-menu-2-right">OSINT</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Title 3</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Title 4</div>
                </div>
            </div>
            <div class="section-3">
                <div class="nav-menu-3">
                    <div class="nav-menu-3-left"><i class="fa-solid fa-upload fa-lg"></i></div>
                    <div class="nav-menu-3-right">Upload</div>
                </div>
            </div>
        </div>
        <div class="right-subcard">
            <div class="mini-card-container">
          
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
     
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions