How to make flex items fit their content when wrapping

Question

I have a flex container with the property flex-warp set to wrap. When the elements break into multiple lines they leave extra space in their last position. How do I remove the extra space (marked with red lines in picture below) ?

What I want to achieve here is a paragraph of text with 2 buttons in front of it, and the 2 buttons should respond to the paragraph's width => when there is one line of text, the buttons should be positioned horizontally, else they should be positioned vertically.

 .container {
        display: flex;
        justify-content: space-between;
        border: 1px solid blue;
        max-width: 500px;
    }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid green;
  align-content: start;
}


<div class='container'>
    <p class='content-text'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, consectetur.</p>
    <div class='controls'>
        <button class='edit-btn' title='Edit'>A</button>
        <button class='delete-btn' title='Remove'>B</button>
    </div>
</div>

https://jsfiddle.net/tqvrzxam/13/

Why not just remove `flex-wrap` on `.controls`? Or give `.controls` a larger `flex-basis`? — Dai, Mar 03 '22 at 11:34
@Dai : "What I want to achieve here is a paragraph of text with 2 buttons in front of it, and the 2 buttons should respond to the paragraph's width => when there is one line of text, the buttons should be positioned horizontally, else they should be positioned vertically." — houssam, Mar 03 '22 at 11:44
What you're asking is impossible: CSS has no way of changing other elements' properties based on how many line-breaks or wrapped lines are in a different element's DOM `#text` node (and no, the `:first-line` psuedo-class selector won't help you here). You _can_ likely approximate this behaviour with `flex-basis` as I suggested, but it won't be _perfect_. — Dai, Mar 03 '22 at 11:45
When there is two lines of text the width of the paragraph changes, and that's why the flex-wrap works. The problem here is the extra space left. — houssam, Mar 03 '22 at 11:53
You're only considering the case when the `
` contains sufficient text such that it has to wrap. You're not considering a `
` with a short line caused by a `
`, for example. — Dai, Mar 03 '22 at 11:55

How to make flex items fit their content when wrapping

0 Answers0