Languages

CSS flex box conditional wrapping problem

4 points
Asked by:
Greg
6020

I am doing currently comment system for my web page. I have got some problem with my layout.

I whould like to achive folowing effect only with css:

 

CSS - conditional wrapping problem

 

  • When comment is longer than available horizontal space i whould like to put External link to new line - first comment.
  • When comment is short just keel External link in same line - second comment.

Is it possible to do it only using css?

This is my template:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    * {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
        "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
        "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
    
    .comments {
      border-bottom: 1px solid #e3e5e6;
      font-size: 13px;
    }

    .comment {
      padding: 7px;
      border-top: 1px solid #e3e5e6;
    }
    
    .link {
      text-align: right;
      font-size: 12px;
      color: #bfc0bf;
    }
   
  </style>
</head>
<body>
  <div class="comments">
    <div class="comment">
      <div class="text">
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
      </div>
      <div class="link">External link</div>
    </div>
    <div class="comment">
      <div class="text">this is very short comment...</div>
      <div class="link">External link</div>
  	</div>
  </div>
</body>
</html>

 

1 answer
1 points
Answered by:
Greg
6020

Try to use:

  • flex-wrap: wrap; for .comment element
  • flex: auto; for .text element
  • flex: auto; for .link element

 Example solution below:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    * {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
        "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
        "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
    
    .comments {
      border-bottom: 1px solid #e3e5e6;
      font-size: 13px;
    }

    .comment {
      padding: 7px;
      border-top: 1px solid #e3e5e6;
      display: flex;
      flex-wrap: wrap;
    }
    
    .text {
      flex: auto;
    }
    
    .link {
      text-align: right;
      font-size: 12px;
      color: #bfc0bf;
      flex: auto;
    }
   
  </style>
</head>
<body>
  <div class="comments">
    <div class="comment">
      <div class="text">
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
      </div>
      <div class="link">External link</div>
    </div>
    <div class="comment">
      <div class="text">this is very short comment...</div>
      <div class="link">External link</div>
  	</div>
  </div>
</body>
</html>

 

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join