Items inside flexbox container are flowing out of container - html

Question

I am creating a portfolio page in which I am showing my 6 projects, 3 in a row using flexbox. The items inside are flowing out of the flexbox even though I have used flex-wrap. I am relatively new to this so I don't know what is happening.
The red border is my flexbox container and it contains six div elements. Inside each div element, there is one image and another div element which is like a caption. Each image is of a different size
HTML Code:
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
CSS Used:
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
There is one particular line which is enabling equal height for all images height: calc(100% );. I don't know how it works, I took it from the internet. It was used to have the equal height for each image.
Also, the bottom and the top margin between blocks is not working.
I want some help in wrapping content inside container properly and understanding how height: calc(100% ); works.
Complete Code: https://codepen.io/tushar_432/pen/poyxmyZ

Answer 1

Don't make the image height:100%, this will make the image take all the space pushing the text outside thus the overflow. Use flexbox to make it fill all the space minuse the text space:
#work-container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block {
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block {
width: 45%;
}
}
.work-block {
display:flex; /* here */
flex-direction:column; /* here */
}
.work-block img {
width: 100%;
margin: 0;
padding: 0;
object-fit: cover;
flex: 1; /* here */
}
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
</section>

Answer 2

Your caption is overflowing, you can add
display: flex;
flex-direction: column;
to your .work-block
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght#400;700&family=Catamaran:wght#400;600&family=Raleway:ital#1&display=swap');
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
top:0;
}
body{
background-color: bisque;
font-family: 'Catamaran', sans-serif;
text-align: center;
}
#header{
position: sticky;
top:0px;
margin:0;
}
#navbar{
color:white;
width:100%;
display: flex;
background-color:#12343b;
flex-direction: row;
justify-content: flex-end;
padding:18px;
font-family: 'Catamaran', sans-serif;
font-size: x-large;
font-weight: 450;
border-bottom: 2px solid white;
}
.nav-block:hover{
color:#e1b382;
}
.nav-block{
padding:0 20px;
}
#about h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 700;
font-size: 65px;
color: #fefefe;
}
#about h3{
font-size:24px;
font-family: 'Raleway', sans-serif;
color: #e1b382;
}
#about{
text-align: center;
padding:250px;
background-color:#2d545e;
color:white;
}
#work{
padding:50px 0;
background-color: #e1b382;
}
#work h1{
font-weight: 600;
font-size: 40px;
color: #12343b;
}
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
display: flex;
flex-direction: column;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
#contact{
padding:150px;
background-color: #2d545e;
}
#contact-container{
display: flex;
}
#footer{
padding:40px;
background-color:#2d545e;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<header id="header">
<nav id="navbar">
<div class="nav-block">About</div>
<div class="nav-block">Work</div>
<div class="nav-block">Contact</div>
</nav>
</header>
<section id="about">
<h1>Hey I am Tushar</h1><br>
<h3>a computers <br>and technology enthusiast</h3>
</section>
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<div id="contact-container">
<div class="contact-block">
<i class="fab fa-facebook"></i><span>Facebook</span>
</div>
<div class="contact-block">
<i class="fab fa-github"></i><span>Github</span>
</div>
<div class="contact-block">
<i class="fas fa-hashtag"></i><span>Twitter</span>
</div>
<div class="contact-block">
<i class="fas fa-at"></i><span>Send a mail</span>
</div>
<div class="contact-block">
<i class="fas fa-mobile-alt"></i><span>Call me</span>
</div>
</div>
</section>
<footer id="footer">
<span>**This is just a fake portfolio. All the projects and contact details given are not real.</span>
<span>© Created for freeCodeCamp </span>
</footer>