html - two divs side by side with ellipsis - issue with min-width -


i have 2 divs side side.

both divs must remain on same line (not 1 under other), despite length of contents of each div.

so used css text-overflow: ellipsis on both divs (cobbled different jsfiddle). work, except 1 small issue.

how can add min-width 2nd div class : .container > div:last-child (this div yellow background)?

i have tried add min-width: 150px; css class, kills text-overflow: ellipsis; effect.

i have attached jsfiddle example of trying achieve.

.container {    display: -webkit-flex;  }  .container>div:first-child {    white-space: nowrap;    -webkit-order: 1;    -webkit-flex: 1;    background: aqua;    -webkit-flex: 0 1 auto;    /*important*/    text-overflow: ellipsis;    overflow: hidden;    width: auto;  }  .container > div:last-child {    white-space: nowrap;    -webkit-flex: 1;    -webkit-order: 2;    background: yellow;    -webkit-flex: 1 0 auto;    /*important*/    text-overflow: ellipsis;    overflow: hidden;    width: 150px;  }  .container > div:first-child:hover {    white-space: normal;  }  .container > div:last-child:hover {    white-space: normal;  }
<div class="container">    <div class="not_important1">      employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer    </div>    <div class="not_important2">      url url url url url url url url url url url url url url url url url url url url url url url url url    </div>  </div>

i appreciate suggestions.

instead of using width property use flex property.

this have now:

.container > div:last-child {     -webkit-flex: 1 0 auto; /*important*/      width: 150px; } 

instead try this:

.container > div:last-child {     /* -webkit-flex: 1 0 auto; <-- remove */      flex: 1 0 150px; } 

this tells div have initial width of 150px, enables expand flex-grow: 1.

in effect, min-width: 150px , flex: 1 0 150px same thing.

learn more flex property @ mdn.


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -