Question 185649 in Html Question posted in
Some basic documentation can be found here.

Html – Why is Flex Wrap ignoring the empty space?

I am attempting to create a scheme where I have a big vertical div of 2h height with a big horizontal div next to it in the first h of height and then in the second h of height I’d like to have another smaller div. I’d like it to look like so:

Intended visual

But unfortunately all I am capable of achieving is this:

Actual visual

I am unsure of why the third div is being positioned below the first rather than besides it.

Some additional rules I am unfortunately incapable of applying in my actual case:

  • I cannot wrap any of the div’s individually in another container
  • I cannot use absolute positioning since in my actual use case I am generating the divs dynamically.

Here is the simple example I reproduced.

.container {
  display: flex;
  flex-wrap: wrap;
}

.first {
  background-color: #0afc12;
  flex-basis: 33%;
  height: 400px;
}

.second {
  background-color: #17cfe3;
  flex-basis: 66%;
  height: 200px;
}

.third {
  background-color: #fcba03;
  flex-basis: 33%;
  height: 200px;
}
<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>
Tags:

2

Answers


  1. 0

    .first is considered to be on the same "row" as .second whereas .third is on a second, unrelated "row".

    These days, you can use grid, which is both nice and clean:

    .container {
  /* a spans two rows, b spans two columns */
  /* dot means nothing occupies that cell. */
  grid-template-areas:
    'a b b'
    'a c .';
  height: 400px;
}

/* Set identifier for each */

.first {
  grid-area: a;
}

.second {
  grid-area: b;
}

.third {
  grid-area: c;
}

    Try it:

    .container {
  grid-template-areas:
    'a b b'
    'a c .';
  height: 400px;
}

.first {
  grid-area: a;
}

.second {
  grid-area: b;
}

.third {
  grid-area: c;
}

/* Original styles */

.container {
  display: grid;
}

.first {
  background-color: #0afc12;
}

.second {
  background-color: #17cfe3;
}

.third {
  background-color: #fcba03;
}
    <div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>
    Login or Signup to reply.
  2. 0

    made some flex parameter changes, try out..

    .container {
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.first {
  background-color: #0afc12;
  height: 500px;
}

.second {
  background-color: #17cfe3;
  flex-basis: 50%;
}

.third {
  background-color: #fcba03;
  flex-basis: 50%;
  width: 300px;
}
    <div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>

    feel free to change any values, approach used is flex-column

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search