النص العريض بيبوظ التصميم: مشكلة خروج النص بره الـ Flex Container في CSS

<div class="card">
  <div class="avatar">الصورة</div>
  <div class="content">
    <h3>اسم المستخدم</h3>
    <!-- السطر اللي بيبوظ الدنيا ويخرج بره الكارت -->
    <p class="description">https://nouvil.com/very/long/url/that/breaks/everything/and/goes/out/of/the/screen/bounds/for/testing</p>
  </div>
</div>

.card {
  display: flex;
  width: 400px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
}

.content {
  display: flex;
  flex-direction: column;
  /* السطر المفقود هنا في الـ Flex Item الرئيسي */
}

.description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* المفروض يعمل نقط بس مش شغال! */
}