Min-width, max-width, and shrinking to fit in parent

3
votes

I have several items laid out horizontally that should:

  1. Always stay in a single row (never break to new lines).
  2. Not be a larger width than their content or their max-width, whichever is smaller.
  3. Truncate with ellipses when max-width limits their width.
  4. Not be a smaller width than their min-width.

These items share the same parent. If the parent is too small in width to contain the items using the above rules, then the items should shrink width-wise but never get thinner than their min-width.

EDIT: In other words, if the parent is larger than the total width of the children, that's fine. The children should not expand to fill the parent. If the parent becomes smaller than the total width of the children as numbers 1, 2, 3, and 4 dictate, the children should shrink to stay within the new parent width. An example of this (and actually what I'm trying to reproduce) can be seen in Chrome's browser tabs. The tabs have a max-width and a min-width. If you start shrinking the browser width-wise then it will get to a point where the tabs will no longer be able to fit so they start shrinking until they hit their min-width.

I've nailed down numbers 1, 2, 3, and 4 but I don't know how to get them to shrink to stay within the parent width. Any help would be much appreciated.

Example HTML:

<div class="container">
    <div class="tab"><span>Bookmark</span></div><div class="tab"><span>Finish</span></div><div class="tab"><span>A</span></div><div class="tab"><span>Kala kazoo A Roosky Fantastic</span></div>  
</div>

Example CSS:

.container {
    border: 1px solid blue;
    white-space: nowrap;
}

.tab {
    display: inline-block;
    border: 1px solid red;
}

.tab span {
    display: inline-block;
    width: 100%;
    min-width: 20px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/ug3en/

Target browsers: IE9+, modern Chrome, modern Firefox, and modern Safari.

2
htmlcss

2 Answers

2
votes

If you add max-width:25% to the .tab class, it will ensure that the tabs don't overflow.

That still doesn't fill out the main bar, though, so I'd suggest you use a media query to target small widths: in small mode remove the .tab span { max-width: 100px } and allow each tab-span to fill out 1/4 of the container.

Try this fiddle.

-2
votes

Try below CSS:

.container {
    border: 1px solid blue;
    white-space: nowrap;
    width:auto;
    position:absolute;
}