Utilize the "display: flex" property to position an avatar alongside a comment that is wrapped

Looking for a solution similar to the problem presented in this Stack Overflow thread about positioning text next to an image, but specifically when using "display: flex".

We are facing an issue where a comment, consisting of an avatar image and accompanying text, is supposed to be displayed on the right side of the avatar. However, when the text is long, it jumps below the avatar instead:

https://i.stack.imgur.com/VXrdc.png

The goal is to set the width of the avatar and have the comment take up the remaining available width.

//CSS Snippet 
a.inner-anchor {
  cursor: default;
}
div.github-comments {
  width: 70vw;
  margin: auto;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 40px;
}

//HTML Code
<div class="github-comments">
  <h2>Comments</h2>
  <ul id="gh-comments-list">

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars3.githubusercontent.com/u/45234211?v=4">
      </a>
      <div class="comment-content">
      <p>A Comment.</p>
      </div>

      <a href="https://github.com/" class="comment-url">#616068412 - 2020-04-19T07:44:35Z</a>

    </li>

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars3.githubusercontent.com/u/45234211?v=4">
      </a>
      <div class="comment-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>

      <a href="https://github.com/" class="comment-url">#616068412 - 2020-04-19T07:44:35Z</a>

    </li>

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars0.githubusercontent.com/u/45391682?v=4">
      </a>
      <div class="comment-content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      </div>
      <a href="https://github.com/" class="comment-url">#618986438 - 2020-04-24T12:44:51Z</a>

    </li>

  </ul>


  <p id="no-comments-found">No comments found for this article.</p>
  <p id="loading-comments" style="display: none;">Loading comments...</p>
  <p id="next-comments-page" style="display: none;">next comments page</p>
  <p id="leave-a-comment">Join the discussion for this article on <a href="https://github.com/">this ticket</a>. Comments appear on this page instantly.</p>
</div>

For further reference, check out this fiddle showcasing the issue: https://jsfiddle.net/otmjrks6/

htmlcssflexbox

Answer №1

All you’re missing is adding flex: 1; to the class designated for comment text:

#gh-comments-list li .comment-content {
    padding: 0 1.5em;
    flex: 1;   /* Allows element to adjust its size */
}

This adjustment enables the element to expand or contract based on available space. Source: MDN Web Docs for flex property

Example of Implementation:

a.inner-anchor {
  cursor: default;
}

div.github-comments {
  width: 70vw;
  margin: auto;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 40px;
}

#gh-comments-list {
  list-style: none;
  list-style-type: none;
}
#gh-comments-list li {
    margin: 0;
    padding: 1.5em 0;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #aaa;
}
#gh-comments-list li>a.user {
    width: 2.5em;
    height: 2.5em;
    overflow: hidden;
    padding: 3px;
    flex-basis: 2.5em;
}
#gh-comments-list a.user, #gh-comments-list a.comment-url {
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
#gh-comments-list li>a.comment-url {
    width: 100%;
    text-align: right;
    font-size: .6em;
    opacity: .5;
}
#gh-comments-list li .comment-content {
    padding: 0 1.5em;
    flex:1;
}
#gh-comments-list li>a.user img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 3px #aaa;
    box-sizing: border-box;
}
#no-comments-found {
  display: none;
}
#next-comments-page {
  cursor: pointer;
  display: none;
}
<div class="github-comments">
  <h2>Comments</h2>
  <ul id="gh-comments-list">
  
    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars3.githubusercontent.com/u/45234211?v=4">
      </a>
      <div class="comment-content">
      <p>A Comment.</p>
      </div>

      <a href="https://github.com/" class="comment-url">#616068412 - 2020-04-19T07:44:35Z</a>

    </li>

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars3.githubusercontent.com/u/45234211?v=4">
      </a>
      <div class="comment-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>

      <a href="https://github.com/" class="comment-url">#616068412 - 2020-04-19T07:44:35Z</a>

    </li>

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars0.githubusercontent.com/u/45391682?v=4">
      </a>
      <div class="comment-content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      </div>
      <a href="https://github.com/" class="comment-url">#618986438 - 2020-04-24T12:44:51Z</a>

    </li>

  </ul>


  <p id="no-comments-found">No comments found for this article.</p>
  <p id="loading-comments" style="display: none;">Loading comments...</p>
  <p id="next-comments-page" style="display: none;">next comments page</p>
  <p id="leave-a-comment">Join the discussion for this article on <a href="https://github.com/">this ticket</a>. Comments appear on this page instantly.</p>
</div>

Answer №2

a.inner-anchor {
  cursor: default;
}

div.github-comments {
  width: 70vw;
  margin: auto;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 40px;
}

#gh-comments-list {
  list-style: none;
  list-style-type: none;
}
#gh-comments-list li {
    margin: 0;
    padding: 1.5em 0;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #aaa;
}
#gh-comments-list li>a.user {
    width: 2.5em;
    height: 2.5em;
    overflow: hidden;
    padding: 3px;
}
#gh-comments-list a.user, #gh-comments-list a.comment-url {
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
#gh-comments-list li>a.comment-url {
    width: 100%;
    text-align: right;
    font-size: .6em;
    opacity: .5;
}
#gh-comments-list li .comment-content {
    padding: 0 1.5em;
    width: calc(100% - 94px);
}
#gh-comments-list li>a.user img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 3px #aaa;
    box-sizing: border-box;
}
<div class="github-comments">
  <h2>Comments</h2>
  <ul id="gh-comments-list">

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars3.githubusercontent.com/u/45234211?v=4">
      </a>
      <div class="comment-content">
      <p>A Comment.</p>
      </div>

      <a href="https://github.com/" class="comment-url">#616068412 - 2020-04-19T07:44:35Z</a>

    </li>

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars3.githubusercontent.com/u/45234211?v=4">
      </a>
      <div class="comment-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
      </div>

      <a href="https://github.com/" class="comment-url">#616068412 - 2020-04-19T07:44:35Z</a>

    </li>

    <li>

      <a href="https://github.com/" class="user">
        <img class="avatar" src="https://avatars0.githubusercontent.com/u/45391682?v=4">
      </a>
      <div class="comment-content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      </div>
      <a href="https://github.com/" class="comment-url">#618986438 - 2020-04-24T12:44:51Z</a>

    </li>

  </ul>


  <p id="no-comments-found">No comments found for this article.</p>
  <p id="loading-comments" style="display: none;">Loading comments...</p>
  <p id="next-comments-page" style="display: none;">next comments page</p>
  <p id="leave-a-comment">Join the conversation on this article by visiting <a href="https://github.com/">this link</a>. Comments will be displayed instantly.</p>
</div>

Make sure to add a width in comment-content as follows: "width: calc(100% - 94px)"

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

Issues with the Content Editable Functionality

While working on my website, I encountered a strange issue. For some reason, I can't seem to get the contenteditable="true" attribute to work on the heading with the ID "hl". It would be awesome if someone could help me figure out how to mak ...

javascripthtmlcss

Step-by-step guide on triggering a button using another button

I have a unique question that sets it apart from others because I am looking to activate the button, not just fire it. Here is my syntax: $("#second_btn").click(function(){ $('#first_btn').addClass('active'); }) #first_btn ...

javascriptjqueryhtmlcss

Inconsistencies found with CSS Dropdown Menu functionality across various web browsers

Issue Resolved - See Update Below While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occu ...

htmlcssmenunavigation

Is it possible to resume CSS animation when the page is first loaded?

I'm looking for a way to ensure that my CSS animations on the elements in my header.php file continue smoothly when navigating to different pages. For example, if I have a 200-second looped animation and navigate to the "about us" page 80 seconds int ...

phpjqueryhtmlcss

Dynamic scaling and positioning of multiple images in relation to each other using CSS

I am currently working on layering images over a large logo and making sure it remains responsive. I want the overlaid images to maintain their position on the logo even when the browser window size is reduced. Here is what my current browser display look ...

htmlcssresponsive-design

``Protect your PDF Document by Embedding it with the Option to Disable Printing, Saving, and

Currently, I am facing a challenge to enable users to view a PDF on a webpage without allowing them to download or print the document. Despite attempting different solutions like Iframe, embed, PDF security settings, and Adobe JavaScript, I have not been s ...

javascripthtmlpdfiframeembed

HTML - Link to enable automatic printing of the page

Assignment: Develop a hyperlink (HTML <a> tag) that triggers the printing of the webpage without the user manually pressing CTRL + P. My search for information on this topic has not yielded a definitive answer. Some sources suggest using JavaScript ...

htmlprinting

Uncovering complete hyperlink text using Scrapy

When using scrapy to extract data from a webpage, I encountered the following issue: <li> <a href="NEW-IMAGE?type=GENE&amp;object=EG10567"> <b> man </b> X - <i> Escherichia coli </i> </a> <br> </li> ...

pythonhtmlscrapy

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

javascriptphpjqueryhtmlajax

Reposition the span element to the right of the div tag

I need help adjusting the positioning of the elements in this HTML code. How can I move the span element with the image to the right of the div tag? Here is the code snippet: <div style='width:600px;padding-top: 2px;padding-bottom: 1px'& ...

javascriptcsshtmlwebix

Welcome to the awe-inspiring universe of Typescript, where the harmonious combination of

I have a question that may seem basic, but I need some guidance. So I have this element in my HTML template: <a href=# data-bind="click: $parent.test">«</a> And in my Typescript file, I have the following code: public test() { alert( ...

javascripthtmltypescriptknockout.js

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Closed. This question is opinion-based. It is not currently accepting answers. Lo ...

javascripthtmliframe

Retrieving selected options from a jQuery mobile multiselect for database storage

I'm currently working on extracting values from a select list in a jQuery mobile application. Here's the markup for my select element: <div data-role="fieldcontain"> <label for="stuff" class="select">Stuff:</label ...

javascriptjqueryhtmljquery-mobile

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

javascripthtmlcss

Extracting HTML elements between tags in Node.js is a common task faced

Imagine a scenario where I have a website with the following structured HTML source code: <html> <head> .... <table id="xxx"> <tr> .. </table> I have managed to remove all the HTML tags using a library. Can you suggest w ...

javascripthtmlnode.js

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

I recently created a website. However, when I uploaded it to my hosting company's server and tested it on different browsers, the layout appeared broken. Some of the CSS files loaded properly, but certain elements and styles were not in their correct ...

phpjquerycsshtml

Creating tables in HTML is a useful skill to have. Follow these steps

I am looking to create a simple HTML table, and I have provided my code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" ...

htmlhtml-table

What are the best ways to position elements within a div?

In my small information div, I am looking to align the content on the right side. Specifically, 065 31 323 323, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d4c4c1c0cbdfc4e5c2c8c4ccc98bc6cac8">[email protected]</ ...

htmlcssalignment

How can I create a unique CSS or JS transition for a button that dynamically changes size based on text

My Angular app features a button labeled with "+". When the user hovers over it, I use element.append(' Add a New Number'); to add the text "Add a New Number" next to the + sign in the label. Upon clicking the button, a new number is added and ...

javascriptjqueryhtmlcssangularjs