CODEWITHSUNDEEP
htmlcssflexbox
user429620
user429620

Reputation:

3 column display:flex layout with overflow:ellipsis

Trying to have a layout where the middle column has a flexible width; it should take all space that is not taken by first and last column.

First column is always 50px, last column width is determined by it's contents. As said, middle column should take remainder.

Tried some things with display:flex but can't work it out.

You can see what I tried here;

https://jsfiddle.net/qwxxdkpd/1/

However, middle column is overflowing and pushing third column out of sight.

Correct should be that the middle column is cut off, because I use the following; 

#container .list .address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  font-family: "Courier New";
}

Any ideas on how to fix it;

Should look as this: 

Icon|11111111111111111111111111111...|1.2 (end of line)

Upvotes: 0

Views: 872

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122037

Important part is to use flex: 1 and overflow: hidden on .details and white-space: nowrap, text-overflow: ellipsis on .address

#container .list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

#container .list li {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #a1d1b8;
  display: flex;
  justify-content: space-between;
}

#container .list li > div {
  vertical-align: middle;
}

#container .list .type {
  padding-right: 15px;
  flex: 0 0 50px;
  background: green;
}

#container .list .type i {
  font-size: 40px;
}

#container .list .details {
  flex: 1;
  overflow: hidden;
  font-family: "Courier New";
}
.address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#container .list .value {
  padding-left: 15px;
  font-size: 55px;
}

#container .list .details .date {
  font-weight: bold;
  margin-bottom: 5px;
}
<div id="container">
  <div class="list">
     <ul>
       <li>
        <div class='type'><i class='fa fa-arrow-circle-right'></i></div>
        <div class='details'>
          <div class='date'>date</div>
          <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
         </div>
         <div class='value'>1.2</div>         
       </li>
     </ul>
  </div>
</div>

Upvotes: 2

Related Questions