Responsive Scrolling Tabs

index.html

<div class="container">
  
  <div class="tablist">
    <ul class="inner">
      <li class="tablist__tab">Tab 1</li>
      <li class="tablist__tab">Tab 2</li>
    </ul>
  </div>
  
  <div class="tablist" role="tablist">
    <ul class="inner">
      <li class="tablist__tab">Lorem ipsum dolor sit</li>
      <li class="tablist__tab">amet</li>
    </ul>
  </div>
  
  <div class="tablist" role="tablist">
    <ul class="inner">
      <li class="tablist__tab">Tab 1</li>
      <li class="tablist__tab">Tab 2</li>
      <li class="tablist__tab">Tab 3</li>
      <li class="tablist__tab">Tab 4</li>
      <li class="tablist__tab">Tab 5</li>
    </ul>
  </div>
  
  <div class="tablist" role="tablist">
    <ul class="inner">
      <li class="tablist__tab">Lorem</li>
      <li class="tablist__tab">ipsum dolor</li>
      <li class="tablist__tab">sit</li>
      <li class="tablist__tab">amet consetetur</li>
      <li class="tablist__tab">sadipscing</li>
      <li class="tablist__tab">elitr</li>
    </ul>
  </div>
  
</div>

Responsive Scrolling Tabs.markdown

Responsive Scrolling Tabs

Magic tabs that resize themselves according to their container's width. Tab widths default to a percentage value, which is set automatically in CSS by counting child elements. If a tab's content overflows its available width, then the tabs adjust their widths to fit. If they can't fit on the screen then the tabs start to scroll horizontally.

A Pen by Ed Wright on CodePen.

License.

style.scss

.container {
  width: 30%;
  margin: auto;
}

.tablist {
	margin: 1rem 0;
	padding: 0;
	overflow-x: scroll;

	> .inner {
		display: table;
		width: 100%;
    margin: 0;
    padding: 0;
	}

	@for $i from 1 through 5 {
		&__tab:first-child:nth-last-child(#{$i}),
		&__tab:first-child:nth-last-child(#{$i}) ~ &__tab {
			width: (100% / $i);
		}
	}

	&__tab {
		box-sizing: border-box;
		display: table-cell;
		margin: 0;
		padding: 15px 20px 12px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
		text-align: center;
		line-height: 1;
		white-space: nowrap;
    color: #fff;
		background-color: #253038;
		cursor: pointer;

		&:hover {
      background-color: #444;
			box-shadow: inset 0 3px 0 0 #db0011;
		}
	}
}