0

I am struggling with using flexbox to achieve that

This code is quite self explaining

<div id="inlineWrapper">
    <div class="widthOfTheContent">Some label</div>
    <div class="widthOfRemainingSpace"> <input class="width-100"/> </div>
</div>

I tried to play with flexbox but could not figure out how to make the first inline div to take the width of the content

Bartłomiej Sobieszek
  • 2,692
  • 2
  • 25
  • 40

2 Answers2

1

You just need flex:1 on the element you want to fill the space:

#inlineWrapper {
  display: flex;
}

.widthOfRemainingSpace {
  flex: 1;
}

.widthOfRemainingSpace input {
  width:100%;
}

Codepen here.

Sean Doherty
  • 2,273
  • 1
  • 13
  • 20
1

#inlineWrapper {
  display: flex;
}

.widthOfTheContent {
  background: tomato;
}

.widthOfRemainingSpace {
  flex: auto;
  background: lemonchiffon;
}
.width-100 {
  width: 100%;
}
<div id="inlineWrapper">
    <div class="widthOfTheContent">Some label</div>
    <div class="widthOfRemainingSpace"> <input class="width-100"/> </div>
</div>

You just need to set the widthOfRemainingSpace to flex: auto or flex:1

brijmcq
  • 3,354
  • 2
  • 17
  • 34
  • What's the difference between flex:auto or flex:1 if both are supposed to work the same way there? – Bartłomiej Sobieszek May 08 '20 at 12:05
  • @BartłomiejSobieszek flex:auto is just a shorthand for flex: 1 1 auto. it means the element will absorb any remaining space. flex: 1 is shorthand for flex: 1 1 0. The 3rd parameter is flex-basis, it means that the element has no starting starting value. You don't need the starting value here because your input element has a width of 100% – brijmcq May 09 '20 at 02:24