带圆角图片与右侧文本的圆角Div布局异常求助

存在的问题 #

• 文本溢出容器边界
• 文本从容器中部开始，无法贴近图片
• 图片未贴合容器边缘，与文本间距过大

修改后的代码 #

HTML（结构无需改动）

<div class="container2">
    <div class="image-container">
        <img src="test.svg" alt="Image" />
    </div>
    <div class="text-container">
        <p>这里是需要展示的文本内容，即使内容较长也不会轻易溢出容器啦。</p>
    </div>
</div>

CSS

.container2 {
    /* 移除padding-top，避免固定height下内部空间被挤压 */
    height: 140px;
    background: #FFFFFF;
    box-shadow: 3px 3px 7px #00000029;
    border-radius: 94px;
    opacity: 1;
    display: flex;
    /* 让内容垂直对齐，想让文本顶部对齐就改成align-items: flex-start */
    align-items: center;
    /* 给容器加左右内边距，避免内容贴死圆角边缘 */
    padding: 0 20px;
}

.image-container {
    /* 固定图片容器宽度，代替flex:1，避免占比过大 */
    width: 120px;
    height: 100%;
    /* 让图片容器内的元素垂直居中 */
    display: flex;
    align-items: center;
}

.image-container img {
    /* 去掉多余padding，让图片贴近容器 */
    width: 100%;
    height: auto;
    /* 确保图片圆角和容器匹配 */
    border-radius: 50%;
}

.text-container {
    /* 占满剩余空间 */
    flex: auto;
    /* 调整内边距，缩小和图片的间距 */
    padding-left: 15px;
    /* 强制文本换行，避免溢出 */
    word-break: break-all;
    /* 文本溢出时显示省略号（可选） */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

关键调整说明 #

1. 容器部分：移除padding-top，避免固定高度下内部内容被挤到下方；添加align-items: center让内容垂直居中，同时给容器加左右内边距，防止内容贴死圆角边缘。
2. 图片容器：用固定宽度代替flex:1，避免图片区域占比过大；给图片容器加display: flex和align-items: center，让图片垂直居中于容器。
3. 图片样式：设置width:100%让图片填满容器，height:auto保持比例；去掉多余padding让图片贴近容器边缘，同时保留border-radius确保圆角效果。
4. 文本容器：用flex:auto占满剩余空间；缩小padding-left拉近与图片的距离；添加word-break: break-all强制文本换行，配合溢出省略号逻辑（可选），彻底解决文本溢出问题。

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