Fit contents in flex layout

I have a very simple setup - a display: flex header with a logo on the left and a react-select on the right.

But, as you can see, react-select doesn’t stretch to fit the value. I’ve tried a lot of options, but nothing seems to work. Does anyone have a solution?

Here’s the sandbox.

I have asked this question on SO as well, with little traction…

[artooras]

Thanks @ebonow , I ended up using a version of your solution. I used position: relative on singleValue.

[ebonow]

@artooras Hello again,

The styling I think you are looking for is based on the SingleValue. Since the default styling is set to position: absolute, it will not flex without some styling overrides.

I responded to a thread recently discussing how to create an inline React-Select (with a working sandbox example). While you would likely want to keep the Indicators and borders, it should fit as a proof of concept of flexing the width of the Select to fit the value.

This is likely the bit of styling you are looking for to apply to the SingleValue component

/* Position value relative (instead of absolute) and remove transform and max-width */
.react-select .react-select__single-value {
  position: relative;
  transform: none;
  max-width: none;
}