text breaks free from the flex container when zooming in

Hi, I am attempting to design a user card-type div that includes images on the left and the username on the right. I have managed to create the layout, but when zooming in, the text is overflowing and escaping the flex container. Here is my code snippet. You can view the output here (try zooming in with 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;
          ">
       JohnDoe
       </span>
</div>

htmlcssflexbox

Answer №1

Instead of setting the width, switch to using 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The hyperlink in the mobile version of the mega menu is unresponsive in HTML

I am encountering an issue with the navigation menu on my Laravel website. The menu links work correctly on the desktop version, but none of the anchor tag links are functioning properly on the mobile version. HTML <div class="menu-container"> < ...

javascriptjqueryhtmlmegamenu

The final position of the Angular increment animation does not hold

Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code: <ul class="digits" [@ordersValue]=&q ...

cssangularangular-animations

Display images fetched using ajax requests

Looking to retrieve the image source path using the code below: $.ajax({ url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId, type: 'GET', dataType: "json", success: function(response) { var path = respo ...

javascriptphphtmlajax

What is the reasoning behind the return type of void for Window.open()?

There is a difference in functionality between javascript and GWT in this scenario: var newWindow = window.open(...) In GWT (specifically version 1.5, not sure about later versions), the equivalent code does not work: Window window = Window.open("", "", ...

javascripthtmlgwt

The alignment is off

<script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } </script> <p text-align="right" id="demo" style="font-family:Comic Sans ...

javascripthtml

JavaScript: Creating Custom IDs for Element Generation

I've been developing a jeopardy-style web application and I have a feature where users can create multiple teams with custom names. HTML <!--Score Boards--> <div id="teamBoards"> <div id="teams"> ...

javascriptjqueryhtml

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

javascriptjqueryhtmlangularjs

The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not ...

htmlcss

Clicking on text will open a popup div using HTML and CSS

I am looking to create a popup div instead of a popup window for my 'About' picture/page with the current button. Here is an example: ...

csshtmlpopup

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...

javascripthtmljquerycssbootstrap-4

What is the reason behind needing to restart the server each time I make a change to my React application?

I'm diving into my first project using React, stepping away from my usual tools of pure HTML, JavaScript, PHP, and Node.js. I decided to create a single-page application portfolio, but I've encountered a frustrating issue. Every time I make a cha ...

javascripthtmlreactjsreload

Steps for selecting a menubar option on a website?

I'm trying to automate clicking a menu on a website using VBA. Sub SearchBot() Dim ie As Object Dim HTMLDoc As MSHTML.HTMLDocument Dim ckt_No As String ckt_No = Range("A2").Value Set ie = CreateObject("InternetE ...

htmlexcelvbaweb-scrapinggetelementbyid

Concealing a button once the collapse feature is toggled in Bootstrap

The following code snippet from the bootstrap website demonstrates how to use collapse functionality: <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href & ...

javascriptjquerycsstwitter-bootstrap

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

Center div encroaching on floated left div

Can someone help me align three divs horizontally? I'm having an issue where the center div is overlapping the left div. What could be causing this problem? <div> <div style={{width:"100px", border:"solid blue", ...

htmlcssreactjscss-float

Formatting a pair of elements side by side in MUI Select

Currently, I am tackling the challenge of organizing elements in MUI Select v4. My goal is to display these elements in two columns rather than just one column within the dropdown. Despite attempting to override certain styles within MUI, I have not been ...

cssmaterial-ui

Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox ...

javascriptjqueryhtmlcssmozilla

Sending arrays from HTML table rows to a JavaScript function

When developing a dynamic table using Javascript, I am able to add rows programmatically with the following function: function addrow(tableid) { var tablename = document.getElementById(tableid); var rows = tablename.rows.length; if (rows < ...

javascriptphphtml

Strip inline styles from HTML content in django-tinymce

I am experiencing an issue with django-tinymce where it automatically adds inline styles when I save content. I would prefer to remove this behavior and only save the content in plain HTML. Can someone assist me with resolving this problem? ...

htmldjangotinymcedjango-tinymce

Firefox is not allowing the form to be submitted at this time

My form is functioning correctly on Chrome and Safari, but not on Firefox. Solution Attempt #1 <form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST"> <input type="text&q ...

htmlajaxformslaravelfirefox