текст выходит за пределы гибкого контейнера при увеличении

Question

Привет, я пытаюсь создать пользовательскую карту типа div, в которой есть несколько изображений слева и имя пользователя справа. Я мог бы сделать макет, но при масштабировании текст переполняется и экранирует контейнер flex. вот мой код И это выход (попробуйте увеличить ctrl +)

<div style="
       border: 1px solid #775CD0; 
       display:flex;
       width:20%;
       border-radius:4px;
       ">
  <img src="https://picsum.photos/200/300
    " height="30" width="30" style="  
          align-self:start;
          margin-left:10px;
          padding-top:2px;
          padding-bottom:2px;
          ">
  <img src="https://picsum.photos/200/300/?random
    " class="image2" height="18px" width="18px" style="
          align-self:start;
          margin-top:18px;
          margin-left:-15px;
          ">
  <span class="account-name" style="
          margin-top:6px;
          padding-left:22px;
          ">
       GonFreecks
       </span>
</div>

Answer 1

уберите ширину и используйте дисплей: inline-flex;

<div style="
   border: 1px solid #775CD0; 
   display:inline-flex;
   
   border-radius:4px;
   ">
   <img src="https://picsum.photos/200/300
" height="30" width="30" 
      style="  
      align-self:start;
      margin-left:10px;
      padding-top:2px;
      padding-bottom:2px;
      "
      >
   <img src="https://picsum.photos/200/300/?random
" class="image2" height="18px" width="18px" 
      style="
      align-self:start;
      margin-top:18px;
      margin-left:-15px;
      ">
   <span class="account-name"
      style="
      margin-top:6px;
      padding-left:22px;
      ">
   GonFreecks
   </span>
</div>