'Using overflow-x: scroll with justify-content: center hides the earlier blocks

I have to use the justify-content: center to center the block to come in the center of their parent div. And if the content are more than it needs to be fit in the width, I need to use overflow-x: scroll so that all the blocks come in same line. The problem is some of the starting blocks get hidden using justify-content: center;

Note: I need to have all the content in the center if the number of blocks are limited to 3 or 4 or smaller number.

Please go through this link

.nav-tabs {
        overflow-x: scroll;
        border: 0;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .nav-tabs .nav-item {
        width: 20%;
        min-width: 198px;
        float: left;
        display: flex;
        align-items: stretch;
        text-align: center;
        margin-bottom: 0;
    }

<ul class="nav nav-tabs" role="tablist">
		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>
  
  <li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>
   </ul>

css flexbox

Solution 1:^[1]

I believe that you need wrap the ul under a container. Please see my codepen here. I also pasted code here.

.nav-container {
  width: 100%;
  display: flex;
  align-items: flex-start;
  overflow-x: scroll;
}

.nav-tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: center;
}

.nav-tabs .nav-item {
  width: 20%;
  min-width: 198px;
  float: left;
  display: flex;
  align-items: stretch;
  text-align: center;
  margin-bottom: 0;
}

<div class="nav-container">
<ul class="nav-tabs" role="tablist">
		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>
  
  <li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-1">
				<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
				<span class="iconText">TAB 1</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-2">
				<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
				<span class="iconText">TAB 2</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" href="#tab-3">
				<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
				<span class="iconText">TAB 3</span>
			</a>
		</li>
   </ul>
</div>

Solution 2:^[2]

To achieve correct scrolling of children when there are no space and at the same time center them when there are free space, you could leave block type for container and inline-flex type for children.

.nav {
  background: lightblue;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: center;
}

.nav-item {
  background: pink;
  width: 20%;
  min-width: 198px;
  display: inline-flex;
}

<h2>Case 1: not enough space</h2>
<ul class="nav">
    <li class="nav-item">
        TAB 1
    </li>
    <li class="nav-item">
        TAB 2
    </li>
    <li class="nav-item">
        TAB 3
    </li>
    <li class="nav-item">
        TAB 4
    </li>
    <li class="nav-item">
        TAB 5
    </li>
</ul>

<h2>Case 2: extra space</h2>

<ul class="nav">
    <li class="nav-item">
        TAB 1
    </li>
    <li class="nav-item">
        TAB 2
    </li>
</ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Umesh
Solution 2	Sergey Muravjev

'Using overflow-x: scroll with justify-content: center hides the earlier blocks

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]