What is a way to make the width of all flex-box elements the minimum needed amount?-CodePudding

I have a flex div, which is a flex column and I want the width of the flex-box elements to be as much as the width of the text in them, but still be responsive/dynamic.

    <div
        >
        <div>
            <p >&gt;&gt; option 2</p>
        </div>
    </div>

CodePudding user response：

It seems like you need flex-shrink. Sometimes people set the shorthand flex: 1 , which operates on flex-grow, flex-shrink, and flex-basis. Careful when setting them all at once.

.flex-box .child { flex-shrink: 1; }

the bootstrap class is .flex-shrink-1 and should be set on the child element.

Please see a live example here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

CodePudding user response：

Solved the question, I used align-items:center on the parent flex column (reverse) and white-space: nowrap on the child