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

What is the best method for sending the styled and checked option via email?

Just finished customizing the checkboxes on my contact form at cleaners.se/home. Here's my question: If I select "telefon," how can I ensure that this option is sent to my email? In Contact Form 7, I used to simply type a shortcode. Is there a simila ...

javascripthtmlcsswordpresscontact-form-7

Arranging items in a vertical column using Bootstrap styling

I am facing a particular issue: The initial design is displayed in Picture 1: I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently strugglin ...

cssbootstrap-5

What is the best way to indicate progress as the canvas resizes an image?

Is there a way for me to access progress updates? My main focus is on receiving progress information, regardless of how it will be displayed. I may choose to use a progress bar in the future, but my current inquiry pertains solely to obtaining the data it ...

javascripthtmlcanvas

Adjust the height of an element when the maximum height is set to none

I am trying to add animation to the opening of a menu on my website. This is achieved by adjusting the max-height property of the <div> element that represents the menu, as well as changing the display property. The max-height value is being changed ...

htmlcss

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

Error in THREE.js: The function material.onBeforeRender is not defined

Can someone assist me with an error I'm encountering while trying to run my code in Three.js? The error message reads as follows: three.js:19528 Uncaught TypeError: material.onBeforeRender is not a function at renderObject (three.js:19528) at ...

javascripthtmlthree.js

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

javascriptjquerycsshtml

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Tab panels are shown by Bootstrap 5 tabs

I am using Bootstrap 5 to design a layout that changes based on the width of the screen. When the screen width is greater than or equal to 992 pixels, a table is displayed in the sidebar and some text is shown in the main content area. However, if the scre ...

htmlcsstwitter-bootstrapbootstrap-5

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: The issue arises when setting the div's width as a percentage of the ...

htmlcssangularjstypescript

Using HTML5 Canvas with Firefox 4: How to Retrieve Click Coordinates

Lately, I've been diving into creating HTML5 Video and Canvas demos. Initially, my focus was on optimizing them for Chrome, but now I'm shifting my attention to Firefox and Safari as well. One particular demo I'm currently working on involv ...

javascripthtmlcanvascoordinatesmouseclick-event

Tips for showcasing heading and paragraph elements side by side in css?

I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...

htmlcss

Troubleshooting: Ineffective use of replace() function on input value with jQuery

Visit this link for a demo How can I update the input value based on user selection in a dropdown menu? The objective is to change the value from "service_######" to "membership##_####" when the user selects YES, but my current JavaScript code using repla ...

javascripthtmljquery

Obtain an Array Containing all Current Page Paths in Gatsby

While creating a custom `404` page in Gatsby, I am looking to provide users with recommended similar path names based on the non-existent path they have accessed. Can anyone guide me on how to retrieve an array of all the current pages on my website? ...

javascripthtmlreactjsgatsbyserver-side-rendering

Steps for changing an image with another image upon button click in Angular 6

I have a button with an image and text. When the button is clicked, I want to change both the image and content. Here's the code I'm currently using: <div class="btn-default"> <button name="Save" [ngClass]="[bntStyle]" (click)="submit ...

htmlcssangular6

Connecting mysql workbench data using html: A step-by-step guide

I'm currently creating a user interface for a database system using HTML. I'm a bit stuck on how to access and manipulate the database in MySQL Workbench. Does anyone have any suggestions or sample code that could help me connect them? Thanks! ...

htmldatabasewebmysql-workbenchconnector

What could be causing my divs to overlap one another?

I can't seem to get these divs to stack properly, they keep overlapping. I've tried removing the float and checking every attribute in the code. I'm not sure where I'm going wrong. The structure of the rest of the page is similar, but ...

htmlcss

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

javascripthtmlcss

Placing the image at the lower edge of the page

Looking to display thumbnails in a div with dimensions of 120x120, but struggling with the vertical alignment. The current image size is 120x57 and it's not aligning properly within the div, leaving too much space at the top. Here is the code snippet ...

imagecss

Utilizing Angular's ng-repeat with varying directives for each iteration

I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...

javascripthtmlcssangularjs