Wesley Wesley - 1 year ago 96
HTML Question

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;


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)

Answer Source

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">
        <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 class='value'>1.2</div>         

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download