0

I have two divs inside a div as shown below:

.w-35 {
  width: 35%;
}

.d-flex {
  display: flex!important;
}

.mr-auto {
  margin-right: auto!important;
}

.flex-column {
  -webkit-box-orient: vertical!important;
  -webkit-box-direction: normal!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
}
<div class="d-flex">
  <div class="mr-auto">
    <div>Box1</div>
  </div>

  <div class="w-35">
    <div class="flex-column"> Box2 </div>
  </div>
</div>

While the second div has a width of 35%, is there a way I could correctly deduce the width of the first div with class mr-auto to be 65%? I always want the width of the first div to be 100% - width_of_second_div_in_percent.

How could I do this?

Jose A. Ayllón
  • 866
  • 6
  • 19
Suhail Gupta
  • 22,386
  • 64
  • 200
  • 328

1 Answers1

1

If you just set flex: 1 on .mr-auto element then it will take rest of the free width in that row and you do not need to set fixed with. Also instead of width you could use flex property on the element with fixed width.

With this approach width of the .mr-auto element will always depend on the width of the fixed element.

.w-35 {
  flex: 0 0 35%;
}

.mr-auto {
  flex: 1;
}

.d-flex {
  display: flex;
}

.d-flex > div {
  border: 1px solid black;
}
<div class="d-flex">
  <div class="mr-auto">
    <div>....</div>
  </div>

  <div class="w-35">
    <div class="flex-column"> ... </div>
  </div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • Could you help differentiate between `flex: 1` and `margin-right: auto!important` ? – Suhail Gupta Jun 10 '19 at 13:49
  • Inside flex container, margin-right: auto will position flex-child on the left start of the empty space, and `flex` is used for defining flex properties like basis, grow and shrink. – Nenad Vracar Jun 10 '19 at 13:52