Kevin Powell - Community•10mo ago

Overflow with flexbox resulting in hacky use of calc

I'm having issues finding a more elegant solution that does not result in flexbox children overflowing by not respecting its parent's width. Specifically sidebar-profile-name is overflowing the sidebar with longer names where I'd rahter have it cut off as to not extend onto multiple lines. HTML (Vue 3 with Nuxt)

<nav class="sidebar">
        <!-- Profile -->
        <div class="sidebar-profile">
            <img class="sidebar-profile-picture" src="/profiles/profile.svg" alt="Profile Picture"/>
            <div>
                <h2 class="sidebar-profile-name">{{ user.name }}</h2>
                <p class="sidebar-profile-role">{{ user.role }}</p>
            </div>
        </div>
        <!-- Navigational Elements -->
    </nav>

<nav class="sidebar">
        <!-- Profile -->
        <div class="sidebar-profile">
            <img class="sidebar-profile-picture" src="/profiles/profile.svg" alt="Profile Picture"/>
            <div>
                <h2 class="sidebar-profile-name">{{ user.name }}</h2>
                <p class="sidebar-profile-role">{{ user.role }}</p>
            </div>
        </div>
        <!-- Navigational Elements -->
    </nav>

CSS (SCSS)

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    
    width: 250px;
    display: flex;
    flex-direction: column;
    flex: 0 0 150px;
    
    height: 100dvh;
    
    padding: 10px;
    gap: 10px;
    
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    
    &-profile {
        width: calc(100% - 20px); // 2x10px padding
        
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        
        &-name {
            width: calc(100% - 20px - 50px); // 2x10px, 50px image
            
            overflow-x: clip;
            white-space: nowrap;
        }
        
        &-picture {
            width: 50px;
            border-radius: 25%;
        }
    }

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    
    width: 250px;
    display: flex;
    flex-direction: column;
    flex: 0 0 150px;
    
    height: 100dvh;
    
    padding: 10px;
    gap: 10px;
    
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    
    &-profile {
        width: calc(100% - 20px); // 2x10px padding
        
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        
        &-name {
            width: calc(100% - 20px - 50px); // 2x10px, 50px image
            
            overflow-x: clip;
            white-space: nowrap;
        }
        
        &-picture {
            width: 50px;
            border-radius: 25%;
        }
    }

6 Replies

DesertCookie•10mo ago

Without my hacky solution

Mannix•10mo ago

maybe what you are looking for is word-break

DesertCookie•10mo ago

For use in the sidebar-profile-name? Quickly reading up on it, that causes the username to slip onto two lines, correct? - which I don't want (added that as an explicit requirement in my post after your hint).

Mannix•10mo ago

if you want it clipped like that i don't think there is a better solution 🙂

DesertCookie•10mo ago

Alright, thanks a lot. I was questioning my sanity as I usually find the more complex solutions where there's an easier one.

Mannix•10mo ago

but one thing i would use overflox-x: hidden; and text-overflow: ellipsis; and add title attribute with the name so when you hover you can read the whole thing

Gaming

Programming

Overflow with flexbox resulting in hacky use of calc