Text in nested flexbox doesn't truncate, min-width doesn't work-CodePudding

I've been trying for hours to get text truncation working in a flexbox (mostly with Bootstrap 5) with no luck. Been reading all over about needing to use min-with: 0 on the parent div, but I think I've tried every combination of that and can't get it to work.

I also read about align-items-center stretching the text and needing width: 100% but I can't get that to work either.

The code snippet should demonstrate the issue, please ignore the broken layout.

Can anyone point me in the right direction?

Thanks

Edit: Trying to avoid defining width as it needs to be responsive

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul >
  <li >
    <div >
      <input type="text"  placeholder="Search" aria-label="Search" aria-describedby="userManagmentSearch" />
      <span  id="userManagmentSearch">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </span>
    </div>
  </li>
  <li >
    <div >
      <div >
        <img style="width: 24px"  src="https://via.placeholder.com/24x24.png" alt="User Avatar" />
        <div >
          <div>
            <span >admin</span>
            <br />
            <span >
              admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </span>
          </div>
        </div>
      </div>
      <div >
        <span >Admin</span>
        <span >Moderator</span>
        <span >User</span>
      </div>
    </div>
  </li>
  <li >moderator</li>
  <li >moderatoranduser</li>
</ul>;

CodePudding user response：

<ul >
    <li >
        <div >
            <input type="text"  placeholder="Search" aria-label="Search"
                aria-describedby="userManagmentSearch" />
            <span  id="userManagmentSearch">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     viewBox="0 0 16 16">
                    <path
                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg>
            </span>
        </div>
    </li>
    <li >
        <div >
            <div >
                <img style="width: 24px"  src="https://via.placeholder.com/24x24.png"
                    alt="User Avatar" />
                <div >
                    <div>
                        <span >admin</span>
                        <br />
                        <span  style="max-width: 150px;">
                            admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                    </div>
                </div>
            </div>
            <div >
                <span >Admin</span>
                <span >Moderator</span>
                <span >User</span>
            </div>
        </div>
    </li>
    <li >moderator</li>
    <li >moderatoranduser</li>
</ul>

use this bootstrap-5 code for your solution

CodePudding user response：

Change Some Class & Added CSS .flex-fill

CSS

.flex-fill{min-width:1px;}

HTML

<div >
      <div >
        <img style="width: 24px"  src="https://via.placeholder.com/24x24.png" alt="User Avatar" />
        <div >
          <div >
            <span >admin</span>
            <span >
 admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </span>
          </div>
        </div>
      </div>
      <div >
        <span >Admin</span>
        <span >Moderator</span>
        <span >User</span>
      </div>
    </div>

.flex-fill{min-width:1px;}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul >
  <li >
    <div >
      <input type="text"  placeholder="Search" aria-label="Search" aria-describedby="userManagmentSearch" />
      <span  id="userManagmentSearch">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </span>
    </div>
  </li>
  <li >
    <div >
      <div >
        <img style="width: 24px"  src="https://via.placeholder.com/24x24.png" alt="User Avatar" />
        <div >
          <div >
            <span >admin</span>
            <span >
 admin@email.comaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </span>
          </div>
        </div>
      </div>
      <div >
        <span >Admin</span>
        <span >Moderator</span>
        <span >User</span>
      </div>
    </div>
  </li>
  <li >moderator</li>
  <li >moderatoranduser</li>
</ul>;