Html 如何使用CSS最佳地替代聊天泡泡定位？

我正在使用的代码部分如下所示，它在左侧显示了所有气泡，即用户“朋友”或用户“自己”发送的气泡

正如您所看到的，我尝试过使用float，但是当在父div和子div之间使用相对/绝对定位时，所有内容都重叠了，因为我不知道如何处理高度

提前感谢您的帮助

注：我正在使用引导

                    <div class="row no-gutters">
                        <div class="chat-bubble-container ">
                            <div class="chat-bubble msg-self">
                                Lorem ipsum!
                            </div>
                        </div>
                    </div>
                    <div class="row no-gutters">
                        <div class="chat-bubble-container">
                            <div class="chat-bubble msg-friend">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
                            </div>
                        </div>
                    </div>



.chat-bubble-container {
  width: auto;
}

.chat-bubble {
  font-size: 1.4rem;
  padding: 1rem 1.4rem;
  margin: 1rem 3rem;
  border-radius: .9rem;
}

.msg-friend {
  color: white;
  background-color: grey;
}

.msg-self {
  color: white;
  background-color: pink;
}

乱数假文！
Lorem ipsum dolor sit amet，奉献精英。我是尼西，我是尼莫·拉博，伊莱根蒂·阿迪皮西！
.聊天泡泡容器{
宽度：自动；
}
.聊天泡泡{
字体大小：1.4rem；
填充：1雷姆1.4雷姆；
保证金：1雷姆3雷姆；
边界半径：.9rem；
}
.msg朋友{
颜色：白色；
背景颜色：灰色；
}
.msg self{
颜色：白色；
背景颜色：粉红色；
}

您可以使用

左边距：自动和
右边距：自动属性以实现该布局


。聊天气泡容器{
显示器：flex；
宽度：100%；
}
.聊天泡泡{
字体大小：1.4rem；
填充：1雷姆1.4雷姆；
页边顶部：1rem；
边缘底部：1rem；
边界半径：.9rem；
宽度：自动；
最大宽度：300px；
}
.msg朋友{
颜色：白色；
背景颜色：灰色；
左侧边缘：3rem；
右边距：自动；
}
.msg self{
颜色：白色；
背景颜色：粉红色；
保证金权利：3rem；
左边距：自动；
}

乱数假文！
Lorem ipsum dolor sit amet，奉献精英。我是尼西，我是尼莫·拉博，伊莱根蒂·阿迪皮西！
对此我不是很确定，但是你能不能使用类似于
左边距：自动
？谢谢，但恐怕我还没有达到那种布局。页边空白处只有一点变化，但这并没有将聊天气泡带到聊天容器的相反极端。更新了我的答案。在容器中添加了
width:100%
，并在
.chat bubble
中做了一些小更改。请试着告诉我结果@这正是我所需要的！谢谢