使用inline-flex时div宽度收缩，如何实现div与span同行且占满空间？

问题描述 #

需要实现带SVG图标的span和内容div在同一行显示，同时div要占满容器内的所有可用宽度。当前遇到的问题：

• 给.list-item设置display: inline-flex时，div宽度会收缩至可用空间的约30%，无法占满；
• 移除.list-item的display: inline-flex属性后，div能占满宽度，但span和div无法保持在同一行。

解决方案 #

核心是将父容器.example-group设置为flex布局，利用flex的特性让子元素自动同行，同时给div添加flex: 1属性，使其占满剩余空间。

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

.list-item {
    cursor: auto;
    /* 移除inline-flex，添加flex:1占满剩余空间 */
    flex: 1;
    margin-top: 11px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid #5c636a;
    margin-right: 5px;
    background-color: #212529;
    color: #ffffff;
}

.example-group {
    /* 改为flex布局，让子元素同行 */
    display: flex;
    align-items: center; /* 可选：让图标和div垂直居中对齐 */
    gap: 8px; /* 可选：给图标和div之间添加间距 */
}

body {
    background-color: grey;
}

HTML代码（无需修改） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <div class="example-group">
        <span>
            <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" fill="white">
                <path
                    d="M8.5 4c0 .82843-.67157 1.5-1.5 1.5S5.5 4.82843 5.5 4 6.17157 2.5 7 2.5s1.5.67157 1.5 1.5zM7 11.5c.82843 0 1.5-.6716 1.5-1.5 0-.82843-.67157-1.5-1.5-1.5s-1.5.67157-1.5 1.5c0 .8284.67157 1.5 1.5 1.5zm0 6c.82843 0 1.5-.6716 1.5-1.5s-.67157-1.5-1.5-1.5-1.5.6716-1.5 1.5.67157 1.5 1.5 1.5zm6 0c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5zm1.5-7.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5c0-.82843.6716-1.5 1.5-1.5s1.5.67157 1.5 1.5zM13 5.5c.8284 0 1.5-.67157 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.67157-1.5 1.5.6716 1.5 1.5 1.5z">
                </path>
            </svg>
        </span>
        <div class="list-item">
            Lorem ipsum dolor sit amet 1
        </div>
    </div>
    <div class="example-group">
        <span>
            <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" fill="white">
                <path
                    d="M8.5 4c0 .82843-.67157 1.5-1.5 1.5S5.5 4.82843 5.5 4 6.17157 2.5 7 2.5s1.5.67157 1.5 1.5zM7 11.5c.82843 0 1.5-.6716 1.5-1.5 0-.82843-.67157-1.5-1.5-1.5s-1.5.67157-1.5 1.5c0 .8284.67157 1.5 1.5 1.5zm0 6c.82843 0 1.5-.6716 1.5-1.5s-.67157-1.5-1.5-1.5-1.5.6716-1.5 1.5.67157 1.5 1.5 1.5zm6 0c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5zm1.5-7.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5c0-.82843.6716-1.5 1.5-1.5s1.5.67157 1.5 1.5zM13 5.5c.8284 0 1.5-.67157 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.67157-1.5 1.5.6716 1.5 1.5 1.5z">
                </path>
            </svg>
        </span>
        <div class="list-item">
            Lorem ipsum dolor sit amet 2
        </div>
    </div>
    <div class="example-group">
        <span>
            <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" fill="white">
                <path
                    d="M8.5 4c0 .82843-.67157 1.5-1.5 1.5S5.5 4.82843 5.5 4 6.17157 2.5 7 2.5s1.5.67157 1.5 1.5zM7 11.5c.82843 0 1.5-.6716 1.5-1.5 0-.82843-.67157-1.5-1.5-1.5s-1.5.67157-1.5 1.5c0 .8284.67157 1.5 1.5 1.5zm0 6c.82843 0 1.5-.6716 1.5-1.5s-.67157-1.5-1.5-1.5-1.5.6716-1.5 1.5.67157 1.5 1.5 1.5zm6 0c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5zm1.5-7.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5c0-.82843.6716-1.5 1.5-1.5s1.5.67157 1.5 1.5zM13 5.5c.8284 0 1.5-.67157 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.67157-1.5 1.5.6716 1.5 1.5 1.5z">
                </path>
            </svg>
        </span>
        <div class="list-item">
            Lorem ipsum dolor sit amet 3
        </div>
    </div>
</div>

效果说明 #

修改后：

• span（图标）和div会稳定保持在同一行；
• div会自动占满容器内除图标外的所有剩余宽度；
• 可以通过align-items: center让图标和div内容垂直居中，gap属性可以灵活调整两者之间的间距。

内容的提问来源于stack exchange，提问作者nlblack323