How to remove break between two box and three box?

Question

Anyone have any idea how to remove this hole between 2 and 3? I have no idea about this option. Maybe there is any cover? Below is an example in the code

.wrapper {
  display:flex;
  flex-wrap:wrap;
  max-width:320px;
  gap:10px;
  justify-content:flex-end;
}
.box {
  width:150px;
  height:150px;
  background:black;
  color:white;
}

.open {
  height:500px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="box open">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
 </div>
</body>
</html>

You set the width on the wrapper to 320px and the width of each box to 150px. 150x3=450. Did you want box 3 next to, or below box 2? — j08691, Sep 26 '22 at 18:16

score 1 · Answer 1 · answered Sep 26 '22 at 19:11

It wasn't entirely clear to me what exactly you wanted to achieve so I'll cover a couple scenarios:

If you want all the boxes to be in one row but in separate columns, I suggest using a percent value for their width instead of a pixel value. 30% should work in your case (there are many ways to achieve this behavior though, this is how I personally would do it).
If, however, you'd like to have box 1 in one column, and boxes 2 and 3 in another column (which is what I think you're going for), then I would suggest adding an additional wrapping div to your HTML, which would wrap boxes 2 and 3. I've modified your code a little to reflect this change, you can see it below. The added div has the class "box-container"; I've also added some necessary CSS.

I hope this was helpful!

.wrapper {
  display:flex;
  flex-wrap:wrap;
  max-width:320px;
  gap:10px;
  justify-content:flex-end;
}

.box-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.box {
  width:150px;
  height:150px;
  background:black;
  color:white;
}

.open {
  height:500px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="box open">1</div>

  <div class="box-container">
    <div class="box">2</div>
    <div class="box">3</div>
  <div>

 </div>
</body>
</html>

score 0 · Answer 2 · answered Sep 26 '22 at 18:27

You need to add 'flex:1' to '.box' That should solve your issue.

.wrapper {
  display:flex;
  flex-wrap:wrap;
  max-width:320px;
  gap:10px;
  justify-content:flex-end;
}
.box {
  width:150px;
  height:150px;
  background:black;
  color:white;
  flex:1;
}

.open {
  height:500px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="box open">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
 </div>
</body>
</html>

How to remove break between two box and three box?

2 Answers2