How do I use flex to implement this layout? - Two fixed width items always on the right while keep the width of first col flexible

AGamePlayer 0
Viewed 18

I hope the #b and #c keep fixed on the right, while the #a can be flexible according to the parent width.

<div id="flex-container>
  <div id="a">
  some text, the length is undetermined
  </div>
  <div id="b">
    <!-- width is fixed, 100px -->
  </b>
  <div id="c>
    <!-- width is fixed, 30px -->
  </div>
</div>

enter image description here

What should I do?

css
1 Answers

CSS:

#flex-container {
  display: flex;
}

#a {
  flex: auto;
}

#b {
  flex: none;
  width: 100px;
}

#c {
  flex: none;
  width: 30px;
}
Steve Harris0
Related