html - 文本在缩放时转义 flex 容器

Question

您好，我正在尝试创建一个用户名片类型的 div，它在左侧有一些图像，在右侧有用户名。我可以完成布局，但在缩放时文本会溢出并转义 flex 容器。这是我的代码。 And this is the ouptut(Try zooming in by 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

重新移动宽度并使用 display: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>