Is there anyway I can make the width of .text1 (with the red border) take up only the space it needs?
I've tried:
- flex-grow
- flex-shring
- fit-content
- margin right auto on the second item
body{ width 300px;}.flex-wrapper{ width: 200px; margin-left: auto; margin-right: auto; .flex-item{ border: 1px solid green; display: flex; wrap: no-wrap; .text1{ border: 1px solid red; width: fit-content; flex-grow: 0; flex-shrink: 2; } .text2{ height: 1rem; margin-right: auto; } }}<div class="flex-wrapper"><div class=flex-item><span class="text1">Here is some text to forceeeee the wrapping</span><span class="text2">2</span></div></div>