css Question posted in
Some basic documentation can be found here.

Css – Fit a div in sibling remainging space using only flexbox

I’m currently trying to make a div fit an empty space by using only CSS and flexbox,
but I can’t find a way to make it work.

I can’t change the HTML layout, and can’t use absolute positioning either.

.parent {
  display: flex;
  flex-direction: column;
}
.start {
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.left {
  order: 1;
  height: 150px;
  background-color: lightblue;
}
.right {
  order: 2;
  height: 200px;
  background-color: blue;
}
.end {
  height: 50px;
  background-color: red;
}

.left, .right, .end {
  width: 50%;
}
<div class="parent">
  <div class="start">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="end"></div>
</div>

what I’m trying to get is:

expected result

Is it achievable using only flexbox ?

Tags:

2

Answers


  1. 0

    You won’t be able to achieve the desired result with the existing HTML code applying flex (the main problem is that the blocks are not at the same level HTML-wise), but you can use float left and right to do it:

    .left {
  height: 150px;
  background-color: lightblue;
  float: left;
}

.right {
  height: 200px;
  background-color: blue;
  float: right;
}

.end {
  height: 50px;
  background-color: red;
  float: left;
}

.left,
.right,
.end {
  width: 50%;
}
    <div class="parent">
  <div class="start">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="end"></div>
 </div>
    Login or Signup to reply.
  2. 0

    Here you are !

    .parent {
  display: flex;
  flex-direction: row;
  width:100%
}
.left {
  height: 200px;
  display: flex;
  flex-direction: column;
}

.start {
  height: 150px;
  background-color: lightblue;
}
.right {
  height: 200px;
  background-color: blue;
}
.end {
  height: 50px;
  background-color: red;
}

.left, .right {
  width: 100%;
}
    <div class="parent">
  <div class="left">
    <div class="start"></div>
    <div class="end"></div>
    
  </div>
  <div class="right"></div>
<div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search