Bootstrap: fix button width with fluid text width-CodePudding

Using Bootstrap 5. I have a card to display brand info and button on right to navigate.

When the description content is short, the button looks good, in one line. But as the description length is increased, the button is broken in multiple lines

I want to have the button width in one-line only and width adjusted according to the inside content and the description content to be adjusted in the left over space.

Is it possible to achieve it using flex?

Codepen link https://codepen.io/anuj9196/pen/mdKjeEq

I tried setting fixed with to the button, but then the button size does not adjust according to it's inner content. Also tried putting <br> tab in the description content, but then on large screen, too much space is left blank.

CodePudding user response：

Yes, add flex-shrink:0; to the Button. It will prevent it from shrinking at all.

CodePudding user response：

You can use the following line of code to achieve this with flex:

//1. param flex-grow
//2. param flex-shrink 
//3. param flex-basis
flex: 0 0 auto;

This will calculate the basis by the length of the text, but won't grow or shrink if other items (description) change their size.