CSS tabs as Google Chrome

Question

I need to implement CSS tabs similar to Google Chrome tabs.

If tabs are too many, they should collapse to minimal possible width, but if there are only few tabs, they should be, for example, 150px.

Currently it works fine, when there are lots of tabs, but when there are only 3 tabs, it doesn't look as expected.

HTML

<h1>Lots of tabs, works fine</h1>
<ul class="tabs">
    <li class="active"><a href="#" title="Active tab">Active tab</a>

    </li>
    <li><a href="#" title="Inactive tab 1">Inactive tab 1</a>

    </li>
    <li><a href="#" title="Inactive tab 2">Inactive tab 2</a>

    </li>
    <li><a href="#" title="Inactive tab 3">Inactive tab 3</a>

    </li>
    <li><a href="#" title="Inactive tab 4">Inactive tab 4</a>

    </li>
    <li><a href="#" title="Inactive tab 5">Inactive tab 5</a>

    </li>
    <li><a href="#" title="Inactive tab 6">Inactive tab 6</a>

    </li>
    <li><a href="#" title="Inactive tab 7">Inactive tab 7</a>

    </li>
    <li><a href="#" title="Inactive tab 8">Inactive tab 8</a>

    </li>
    <li><a href="#" title="Inactive tab 9">Inactive tab 9</a>

    </li>
    <li><a href="#" title="Inactive tab 10">Inactive tab 10</a>

    </li>
</ul>

<h1>Few of tabs, works not as expected</h1>
<ul class="tabs">
    <li class="active"><a href="#" title="Active tab">Active tab</a>

    </li>
    <li><a href="#" title="Inactive tab 1">Inactive tab 1</a>

    </li>
    <li><a href="#" title="Inactive tab 2">Inactive tab 2</a>

    </li>
</ul>

CSS

.tabs {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}
.tabs li {
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}
.tabs li a {
    text-align: center;
    display: block;
    color: #979797;
    padding: 10px 10%;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tabs li.active {
    width: 150px;
}
.tabs li.active a {
    padding-left: 15px;
    padding-right: 15px;
    background: #22234e;
    color: #fff;
}
.tabs li:not(.active):hover {
    width: 150px;
}

JSFiddle example: http://jsfiddle.net/ang3r/k9rLLqwo/

Thank you!

Answer 1

Look at this Codepen

* {
     box-sizing: border-box;
     margin: 0;
}
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     position: relative;
}
 :root {
    /** * THEME LIGHT */
     --main-bg-color-light: rgba(255, 255, 255);
    /* tabs colors */
     --tabs-header-bg-color: rgb(231, 234, 236);
     --tabs-bg-color: var(--tabs-header-bg-color);
     --tabs-selected-bg-color: var(--main-bg-color-light);
     --tabs-hover-bg-color: rgb(240, 243, 245);
     --tabs-text-color: rgb(88, 92, 95);
     --tabs-hover-text-color: rgb(88, 92, 95);
     --tabs-selected-text-color: rgb(47, 48, 49);
    /** * THEME DARK */
     --main-bg-color-dark: rgb(49, 53, 57);
    /* tabs colors */
     --dark-tabs-header-bg-color: rgb(31, 32, 35);
     --dark-tabs-bg-color: var(--main-bg-color-dark);
     --dark-tabs-selected-bg-color: var(--dark-tabs-header-bg-color);
     --dark-tabs-hover-bg-color: #25282b;
     --dark-tabs-text-color: rgb(134, 136, 138);
     --dark-tabs-hover-text-color: rgb(255, 255, 255);
     --dark-tabs-selected-text-color: rgb(221, 226, 231);
}
 .sd-tabs {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     margin: 0 auto 20px;
     background: #e5e5e5;
     padding-top: 0.075rem;
     position: relative;
     background-color: var(--tabs-bg-color);
}
 .sd-tabs[dark]{
     background-color: var(--dark-tabs-bg-color);
}
 .sd-tab-radio {
     position: absolute;
     opacity: 0;
}
 .sd-tabs > .sd-tab-label {
     background-color: var(--tabs-bg-color);
     padding: 3px 5px 5px 10px;
     display: flex;
     align-items: center;
     min-width: 0;
     width: 100%;
     border-radius: 5px 5px 0 0;
     position: relative;
     z-index: 2;
    /* transition: background-color ease .2s, box-shadow ease .2s;
     */
     cursor: pointer;
     flex: 1;
}
 .sd-tabs[dark] > .sd-tab-label{
     background-color: var(--dark-tabs-bg-color);
}
 .sd-tabs > .sd-tab-label:hover {
     background-color: var(--tabs-hover-bg-color);
     color: var(--tabs-hover-text-color);
     z-index: 3;
}
 .sd-tabs[dark] > .sd-tab-label:hover {
     background-color: var(--dark-tabs-hover-bg-color);
     color: var(--dark-tabs-hover-text-color);
}
 .sd-tabs > .sd-tab-radio:checked .sd-tab-label {
     z-index: 4;
}
 .sd-tabs > .sd-tab-label::after, .sd-tabs > .sd-tab-label::before {
     content: " ";
     pointer-events: none;
     position: absolute;
     display: block;
     height: 80%;
     width: 100%;
     bottom: 0px;
     z-index: -1;
     opacity: 0;
}
 .sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:not(:hover) {
     box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0.25);
     color: var(--tabs-text-color);
}
 .sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:not(:hover) {
     color: var(--dark-tabs-text-color);
}
 .sd-tabs > .sd-tab-radio:checked .sd-tab-label + .sd-tab-label, .sd-tabs > .sd-tab-label:hover + .sd-tab-radio:not(:checked) + .sd-tab-label {
     box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0);
}
 .sd-tabs > .sd-tab-radio:checked + .sd-tab-label:hover {
    /* transition: opacity ease .2s, box-shadow ease .2s;
     */
}
 .sd-tabs > .sd-tab-radio + .sd-tab-label:hover::before, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::before {
     left: -100%;
     border-radius: 0 0 10px 0;
     opacity: 1;
    /* transition: opacity ease .2s, box-shadow ease .2s;
     */
}
 .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::before {
     box-shadow: 14px 0.25em 0 -4px var(--tabs-selected-bg-color);
}
 .sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label::before {
     box-shadow: 14px 0.25em 0 -4px var(--dark-tabs-selected-bg-color);
}
 .sd-tabs > .sd-tab-radio + .sd-tab-label:hover::after, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::after {
     right: -100%;
     border-radius: 0 0 0 10px;
     opacity: 1;
    /* transition: opacity ease .2s, box-shadow ease .2s;
     */
}
 .sd-tabs > .sd-tab-radio:checked + .sd-tab-label::after {
     box-shadow: -14px 0.25em 0 -4px var(--tabs-selected-bg-color);
}
 .sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label::after {
     box-shadow: -14px 0.25em 0 -4px var(--dark-tabs-selected-bg-color);
}
 .sd-tabs > .sd-tab-radio:checked + .sd-tab-label:hover, .sd-tabs > .sd-tab-radio:checked + .sd-tab-label {
     background-color: var(--tabs-selected-bg-color);
     color: var(--tabs-selected-text-color);
     z-index: 4;
}
 .sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label:hover, .sd-tabs[dark] > .sd-tab-radio:checked + .sd-tab-label {
     background-color: var(--dark-tabs-selected-bg-color);
     color: var(--dark-tabs-selected-text-color);
     z-index: 4;
}
 .sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::before {
     box-shadow: 14px 0.25em 0 -4px var(--tabs-hover-bg-color);
     opacity: 1;
    /* transition: all .2s;
     */
}
 .sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::before {
     box-shadow: 14px 0.25em 0 -4px var(--dark-tabs-hover-bg-color);
}
 .sd-tabs > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::after {
     box-shadow: -14px 0.25em 0 -4px var(--tabs-hover-bg-color);
    /* transition: all .2s;
     */
}
 .sd-tabs[dark] > .sd-tab-radio:not(:checked) + .sd-tab-label:hover::after {
     box-shadow: -14px 0.25em 0 -4px var(--dark-tabs-hover-bg-color);
}
 :root .sd-tabs > .sd-tab-radio + .sd-tab-label:first-of-type {
     box-shadow: -8px 0px 0 -7px rgba(0, 0, 0, 0.0);
}
 .sd-tabs > .sd-tab-content {
     flex-basis: 100%;
     display: none;
     padding: 1em;
     width: 100%;
     background-color: var(--tabs-hover-bg-color);
     box-shadow: inset 0px 0px 0 1px var(--tabs-selected-bg-color);
     flex-direction: column;
     border-radius: 0 0 5px 5px;
}
 .sd-tabs > .break {
     background-color: aqua;
     flex-basis: 100%;
}
 .sd-tabs[dark] > .sd-tab-content {
     background-color: var(--dark-tabs-hover-bg-color);
     color: var(--dark-tabs-text-color);
     box-shadow: inset 0px 0px 0 1px var(--dark-tabs-selected-bg-color);
}
 .sd-tabs > .sd-tab-radio:checked + .sd-tab-label + .sd-tab-content {
     display: block;
}
 .sd-tabs > .sd-tab-label .sd-tab-desc{
     display: block;
     margin: 7px 5px 5px 2px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     position: relative;
     font-size: .75rem;
     flex: 1 1 0%;
}
 .sd-tabs > .sd-tab-label .sd-tab-icon{
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 2px;
     width: 15px;
     padding: 2px 3px;
}
 .sd-tabs > .sd-tab-label .sd-tab-icon:not(.sd-tab-close){
     width: 20px;
}
 .sd-tabs > .sd-tab-label[icon-only] .sd-tab-icon:not(.sd-tab-close){
     width: 24px;
     margin: 0 auto;
}
 .sd-tabs > .sd-tab-label .sd-tab-close:hover{
     background-color: #4c4c4c33;
}
 .sd-tabs > .sd-tab-label .sd-tab-close {
     margin-left: auto;
}
 .sd-tabs > .sd-tab-label::after,.sd-tabs > .sd-tab-label::before{
     visibility: hidden;
}
 @media (min-width: 600px) {
     .sd-tab-content {
         order: 999;
    }
     .sd-tabs{
         flex-direction: row;
    }
     .sd-tab-label {
         max-width: 150px;
         width: 150px;
         border-radius: 10px 10px 0 0;
    }
     .sd-tabs > .sd-tab-label::after,.sd-tabs > .sd-tab-label::before{
         visibility: visible;
    }
     .sd-tabs > .sd-tab-label:first-of-type{
         margin-left: 14px;
    }
}
 

<div class="sd-tabs" dark>
   <input class="sd-tab-radio" name="tabs" tabindex="1" type="radio" id="tabone" checked="checked">
   <label class="sd-tab-label" for="tabone">
      <div class="sd-tab-icon">
         <svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
            class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
            <path fill="currentColor"
               d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
         </svg>
      </div>
      <div class="sd-tab-desc">Tab One</div>
      <div class="sd-tab-icon sd-tab-close">
         <svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
            <path fill="currentColor"
               d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
         </svg>
      </div>
   </label>
   <div class="sd-tab-content" tabindex="1">
      <h2>Tab One Content</h2>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
         tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
         semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      </p>
   </div>
   <input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabtwo">
   <label class="sd-tab-label" for="tabtwo">
      <div class="sd-tab-desc">Tab Two</div>
   </label>
   <div class="sd-tab-content" tabindex="1">
      <h2>Tab Two Content</h2>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
         tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
         semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
         ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
         Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
         dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
         tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
         tincidunt quis, accumsan porttitor, facilisis luctus, metus
      </p>
   </div>
   <input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabthree">
   <label class="sd-tab-label" for="tabthree">
      <div class="sd-tab-desc">Tab Three</div>
   </label>
   <div class="sd-tab-content" tabindex="1">
      <h2>Tab Three Content</h2>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
         tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
         semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      </p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
         tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
         semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
      </p>
   </div>
   <input class="sd-tab-radio" tabindex="1" name="tabs" type="radio" id="tabfour">
   <label class="sd-tab-label" for="tabfour">
      <div class="sd-tab-desc">Tab Four</div>
   </label>
   <div class="sd-tab-content" tabindex="1">
      <div class="sd-tabs">
         <input class="sd-tab-radio" name="subtabs" tabindex="1" type="radio" id="subtabone" checked="checked">
         <label class="sd-tab-label" for="subtabone">
            <div class="sd-tab-icon">
               <svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                  class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
                  <path fill="currentColor"
                     d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
               </svg>
            </div>
            <div class="sd-tab-desc">Tab One</div>
            <div class="sd-tab-icon sd-tab-close">
               <svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
                  <path fill="currentColor"
                     d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
               </svg>
            </div>
         </label>
         <div class="sd-tab-content" tabindex="1">
            <h2>Tab One Content</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
               semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            </p>
         </div>
         <input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabtwo">
         <label class="sd-tab-label" for="subtabtwo">
            <div class="sd-tab-desc">Tab Two</div>
         </label>
         <div class="sd-tab-content" tabindex="1">
            <h2>Tab Two Content</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
               semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
               ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
               Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
               dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
               tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
               tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
         </div>
         <input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabthree">
         <label class="sd-tab-label" for="subtabthree">
            <div class="sd-tab-desc">Tab Three</div>
         </label>
         <div class="sd-tab-content" tabindex="1">
            <h2>Tab Three Content</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
               semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
               semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            </p>
         </div>
         <input class="sd-tab-radio" tabindex="1" name="subtabs" type="radio" id="subtabfour">
         <label class="sd-tab-label" for="subtabfour">
            <div class="sd-tab-desc">Tab Four</div>
         </label>
         <div class="sd-tab-content" tabindex="1">
            <h2>Tab Four Content</h2>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
               semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
               semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
            </p>
         </div>
      </div>
   </div>
</div>

I've been working on this project for a long time.

Answer 2

Ok, thanks everyone for suggestions. I made it work in all browsers:

CSS

.tabs {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.tabs li {
    width: 150px;
}
.tabs li a {
    text-align: center;
    display: block;
    color: #979797;
    padding: 10px 15px;
    white-space: nowrap;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tabs li.active a {
    background: #22234e;
    color: #fff;
}
.tabs li.active, .tabs li:not(.active):hover {
    min-width: 150px;
    max-width: 150px;
}

http://jsfiddle.net/k9rLLqwo/40/

It is based on: https://stackoverflow.com/a/9390015/1741042

Answer 3

Have you considered using jquery to count the number of items and then do 100/no. of items and then apply that value as a percentage to the width of each item.

I think this would be the best approach for you.

I hope this helps