Top community members
All Questions Ask Question

Welcome to Dirask IT community! ❤ 💻
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

CSS flex box conditional wrapping problem

1 answers
1 points

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 answers
1 points

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

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more