CSS flex with one column expanding with its content and one column taking the rest of the available-CodePudding

I want the buttons column to expand with its content and the title column to just take up the remaining space.

I created a layout that does what I want in Chrome browser, but it feels like a hack to set the title column to flex-grow:9999; and I suspect it might give unexpected results in some situations.

What would be a more correct way to achieve the same results?

.cont {
  display: flex;
}

.title {
  white-space: nowrap;
  background: lightblue;
  flex-grow: 9999;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buttons {
  background: pinK;
  flex-grow: 1;
  display: flex;
}

.buttons>div {
  background: blue;
  width: 100px;
  height: 20px;
  margin-right: 10px;
  color: white;
  text-align: center;
}

.buttons>div:last-child {
  margin-right: 0px;
}

<div >
  <div >
    Title title title title title title title title title title title title title
  </div>
  <div >
    <div>btn</div>
    <div>btn</div>
    <div>btn</div>
  </div>
</div>

CodePudding user response：

I'm not sure I understood your question. Is this what you're looking for?

.cont {
  display: flex;
}

.title {
  white-space: nowrap;
  background: lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buttons {
  background: pink;
  display: flex;
  flex-grow: 1;
}

.buttons>div {
  background: blue;
  width: 100px;
  height: 20px;
  margin-right: 10px;
  color: white;
  text-align: center;
}

.buttons>div:last-child {
  margin-right: 0px;
}

<div >
  <div >
    Title title title title title title title title title title title title title
  </div>
  <div >
    <div>btn</div>
    <div>btn</div>
    <div>btn</div>
  </div>
</div>

CodePudding user response：

Is this the kind of fix you want?

.cont {
  display: flex;
}

.title {
  white-space: nowrap;
  background: lightblue;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buttons {
  background: pink;
  display: flex;
  gap: 10px;
  flex-shrink: 1;
}

.buttons>div {
  background: blue;
  width: 100px;
  height: 20px;
  color: white;
  text-align: center;
}

<div >
  <div >
    Title title title title title title title title title title title title title
  </div>
  <div >
    <div>btn</div>
    <div>btn</div>
    <div>btn</div>
  </div>
</div>