两列布局：第一列固定宽度，第二列占用剩余空间

Question

我想有两列，第一列正好为width: 3rem，第二列为剩余宽度。

此外，我希望文本转到其自身的下一行，使用flexbox

怎么可能？

.d-flex {
  display: flex !important;
}
.d-inline-block {
  display: inline-block;
}
.text-primary {
  color: white;
}

h2:first-of-type {
 background: blue;
 flex: 0 0 3rem;
}

h2:last-of-type {
  background: red;
  flex: 1;
}

<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</P>
  </div>
</div>

Answer 1

div {
  display: flex;
}

h2:first-of-type {
  flex: 0 0 3rem;  /* flex-grow, flex-shrink, flex-basis */
  background: blue;
}

h2:last-of-type {
  flex: 1;         /* fg: 1, fs: 1, fb: 0 */
  background: red;
}

.text-primary {
  color: white;
}

<div>
  <h2 class="d-inline-block text-primary">1 / </h2>
  <h2 class="d-inline-block">Hello world</h2>
</div>

<div>
  <h2 class="d-inline-block text-primary">1 / </h2>
  <h2 class="d-inline-block">Hello world Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello world</h2>
</div>