I have flex containers each with flex: 1 1 50vw propery set.
But the browser doesn’t show these containers with exactly the same width?!
For example if browser is 1000 px wide one of containers is with 500px width, while the other is with 488.33px width?!
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="p1-container">
<div class="top-bar">
<div class="top-bar-left">
<i class="fa-brands fa-gg"></i>
<span>HustleCase</span>
</div>
<div class="top-bar-right">
<i class="fa-solid fa-cart-shopping"></i>
<span>Card</span>
</div>
</div>
<div class="p1-cent-container">
<header>
<h1>Whiteboard your ideas anywhere</h1>
</header>
<p>The world`s first whiteboard laptop case. Just snap it on and whiteboard on the go.</p>
<a href="#">Buy now</a>
<div class="p1-bk">
<span>See it in action</span>
<span>
<i class="fa-solid fa-circle-arrow-right"></i>
</span>
</div>
</div>
</div>
<div class="p2-container">
<div class="p2-left">
<img src="image/tablet.jpg" alt="">
</div>
<div class="p2-right">
<h2>A Hustle-what?</h2>
<p>HustleCase is a lightweight whiteboard laptop case that makes it easy to:</p>
<ul>
<li><span><i class="fa-solid fa-circle-check"></i></span><span>Sketch on the go</span></li>
<li><span><span><i class="fa-solid fa-circle-check"></i></span><span>Snap on and off easily</span></li>
<li><span><span><i class="fa-solid fa-circle-check"></i></span><span>Protect from scrapes and scratches</span></li>
<li><span><span><i class="fa-solid fa-circle-check"></i></span><span>Write smoothly and erase quickly</span></li>
<li><span><span><i class="fa-solid fa-circle-check"></i></span><span>Gift the special hustler in your life</span></li>
</ul>
</div>
</div>
<div class="p3-container">
<div class="p3-left">
<p>HustleCase is perfect for</p>
<ul>
<li><img src="image/wireframe.png" alt="">Wireframing</li>
<li><img src="image/sketch.png" alt="">Sketching</li>
<li><img src="image/sitemap.png" alt="">Sitemapping</li>
<li><img src="image/to-do-list.png" alt="">To-dos</li>
<li><img src="image/notepad.png" alt="">Notes</li>
<li><img src="image/interview.png" alt="">Interviews</li>
</ul>
</div>
<div class="p3-right">
<img src="image/pen.jpg" alt="">
</div>
</div>
<div class="p4-container">
<header>
<h2>Have questions?</h2>
</header>
<div class="p4-ul">
<ul>
<li>
<h3>Why did you create HustleCase?</h3>
<p>When you want to capture a quick sketch, we recommend using an app called Microsoft Office Lens that has a whiteboard setting to capture photos.</p>
</li>
<li>
<h3>Is it only for Macs?</h3>
<p>The hard shell cases are only for Macs at the moment. We are working on adding more laptops types soon.</p>
</li>
<li>
<h3>How durable is the case?</h3>
<p>The cases are made of plastic, making it durable enough to protect your laptop from bumps and scratches, but light and breathable enough to release heat.</p>
</li>
<li>
<h3>Is it hard to erase?</h3>
<p>Our dry-erase surface has been designed to be scratch resistant, easy to write on and even easier to wipe.</p>
</li>
<li>
<h3>Where do you currently ship to?</h3>
<p>We ship worldwide! Due to high demands, each case will take 1-2 weeks to process and be shipped.</p>
</li>
<li>
<h3>How do I record my sketches?</h3>
<p>As freelance designers, we found our office being wherever our laptop was. We wanted an accesible whiteboard to save time and paper and created the HustleCase!</p>
</li>
</ul>
</div>
<p>Don't see your question here? <b>Email us</b></p>
</div>
</body>
</html>
and the CSS:
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'PT Sans', sans-serif;
}
.p1-container{
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-image: url("image/computer-main.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background:linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),url("image/computer-main.jpg");
}
.top-bar{
display: flex;
flex: 1 1 100%;
height: fit-content;
}
.top-bar span, i{
color: white;
}
.top-bar-left{
margin-left: 6rem;
}
.top-bar-right{
margin-left: auto;
margin-right: 6rem;
}
.p1-cent-container{
display: flex;
flex-direction: column;
flex: 1 1 100%;
margin-top:auto;
margin-top: -9rem;
gap:3rem;
}
.p1-cent-container h1, p, span{
text-align: center;
color: white;
}
.p1-cent-container h1{
/* margin-bottom: 3rem;
margin-top: -6rem; */
}
.p1-cent-container p{
/* margin-bottom: 3rem; */
}
.p1-cent-container a{
/* margin-bottom: 3rem; */
}
.p1-cent-container a{
margin-left: auto;
margin-right: auto;
color: white;
text-decoration: none;
background: rgba(0, 208, 142, 1);
width: fit-content;
padding: 0.5rem;
}
.p1-bk{
display: block;
margin:0 auto;
}
.p2-container{
display: flex;
}
.p2-container img{
width: 50vw;
height: auto;
}
.p2-container ul{
display: flex;
flex-direction: column;
list-style: none;
gap: 1rem;
}
.p2-right{
display: flex;
flex: 1 1 50vw;
justify-content: center;
flex-direction: column;
padding-left: 2rem;
gap: 0.5rem;
}
.p2-left{
display: flex;
flex:1 1 50vw;
}
.p2-right p{
text-align: left;
color:black;
}
.p2-right span{
color: black;
}
.p2-right i{
margin-right: 1rem;
color: rgba(0, 208, 142, 1);
}
.p3-container{
display: flex;
flex: 1 1 100%;
}
.p3-container img{
width: 50vw;
height: auto;
}
.p3-left{
display: flex;
flex-wrap: wrap;
flex:1 1 50vw;
}
.p3-right{
display: flex;
flex: 1 1 50vw;
}
.p3-left img{
width: 12rem;
height: auto;
}
.p3-left ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
gap:4rem;
}
.p3-left li{
display: flex;
flex-direction: column;
text-align: center;
color:rgba(0, 208, 142, 1);
font-size: 2rem;
font-weight: bold;
}
.p4-container{
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
background: rgba(178, 241, 221, 1);
padding: 0 3rem;
}
.p4-container p{
color: black;
}
.p4-container h2{
text-align: center;
}
.p4-ul{
display: flex;
}
.p4-ul ul li{
display: inline-block;
text-align: center;
width: 30%;
height: auto;
vertical-align: top;
margin: 0.5rem 0.5rem;
}
Would you please advice!
I try to set flex-basis to 50%, but the result is exactly the same.
2
Answers
I would recommend setting the width of the children of the flexbox to 50%. That way they should be equally sized, like in the following code snippet:
It is because of the 2rem
padding-lefton the "p2-right" div. If you remove the padding then it will be exactly 500px like the left div. You have setbox-sizing: border-boxfor everything. Remember? 🙂