有没有办法拉伸包裹在 inline-flex 中的块以匹配父 div 宽度？

Question

EDIT: This is the effect that I'm looking for.

I apologize if the question is worded a bit strangely, but essentially, I have two blocks (one div, one icon) inside a div, which is inside another parent div whose width is dynamically adjusted depending on the width of the text. Basically, I want the icon to remain both inline with the other div, and also be right aligned every time the parent div expands. How can I achieve this?

HTML

 .message, .other-message{ border-radius: 15px; padding: 10px; color: white; max-width: 50%; }.other-message { background-color: gray; margin: 10px auto 10px 10px; }.message { background-color: blue; margin: 5px 10px 10px auto; }.date, .username { color: rgb(200, 200, 200); padding: 5px; font-size: 80%; }.date-and-comment-removal{ display: inline-flex; }.date-and-comment-removal > i{ margin-right: 0; }.date-and-comment-removal > i:hover{ cursor: pointer; }.date-and-comment-removal >.date{ margin-right: auto; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> <div class="message">nothing much <div class="username">nisey</div> <div class="date">2021-03-04 3:52 AM</div> </div> <div class="other-message">hey, what's up? Pharetra magna ac placerat vestibulum lectus. Tortor id aliquet lectus proin. Felis donec et <div class="username">darienmiller88</div> <div class="date-and-comment-removal"> <div class="date">2021-03-04 3:52 AM</div> <i class="bi bi-three-dots-vertical"></i> </div> </div>

The three ellipses I want to expand to the right, and remain right aligned every time the message block expands due to a longer message. What should I add or change?

Answer 1

You can add width: 100% to the .date-and-comment-removal and it does what you want.

 .message, .other-message { border-radius: 15px; padding: 10px; color: white; max-width: 50%; }.other-message { background-color: gray; margin: 10px auto 10px 10px; }.message { background-color: blue; margin: 5px 10px 10px auto; }.date, .username { color: rgb(200, 200, 200); padding: 5px; font-size: 80%; }.date-and-comment-removal { width: 100%; display: inline-flex; }.date-and-comment-removal>i { margin-right: 0; }.date-and-comment-removal>i:hover { cursor: pointer; }.date-and-comment-removal>.date { margin-right: auto; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> <div class="message">nothing much <div class="username">nisey</div> <div class="date">2021-03-04 3:52 AM</div> </div> <div class="other-message">hey, what's up? Pharetra magna ac placerat vestibulum lectus. Tortor id aliquet lectus proin. Felis donec et <div class="username">darienmiller88</div> <div class="date-and-comment-removal"> <div class="date">2021-03-04 3:52 AM</div> <i class="bi bi-three-dots-vertical"></i> </div> </div>