Reputation: 13
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
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