2 divs in the parent div(flex), first div is fixed width - expand second width to the rest

Question

.parent {
  display: flex;
}

.first {
  width: 100px;
}

.second {
  display: flex;
}// This is also flex parent div

<div class="parent">
  <div class="first">first</div>
  <div class="second">second
    <div></div>
    <div></div>
  </div>
</div>

How to expand the second div to the rest? I don't want to use calc for second div style.

Answer 1

Add flex:1 to the .second div (borders included to show the actual size)

.parent {
  display: flex;
}

.first {
  width: 100px;
  border: 1px green solid;
}

.second {
  flex: 1;
  border: 1px red solid;
  display: flex;
}

<div class="parent">
  <div class="first">first</div>
  <div class="second">second</div>
</div>

This will set the flex-grow property to 1

Answer 2

Use flex property value to 1 for .second class. This will fit the second div to rest of width.

.parent {
  display: flex;
}

.first {
  width: 100px;
  border: 1px solid black;
}

.second {
  flex: 1;
  border: 1px solid black;
}

<div class="parent">
  <div class="first">first</div>
  <div class="second">second
    <div></div>
    <div></div>
  </div>
</div>