Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

css

flexbox

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>
like image 936
Common Tt Avatar asked Dec 15 '17 05:12

Common Tt

People also ask

What is overflow-x scroll?

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

Does overflow hidden prevent scrolling?

To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.

Can't scroll to top of flex item that is overflowing container?

To fix this problem use flexbox auto margins, instead of justify-content . With auto margins, an overflowing flex item can be vertically and horizontally centered without losing access to any part of it.

Which property can be used to set an element to show a scroll bar when the text overflows *?

The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

How to deal with overflow content in a block?

So, you may specify whether to show scroll bar, clip the content by using hidden value or overflow the content beyond the boundary of element. Similarly, you may deal with the content by overflow-y property if content overflows top and bottom edges of the block element.

Is there a way to enable scrolling in justify-content?

There's a new keyword called safe in the CSS working draft that can be used with justify-content and align-items which will allow "safe" scrolling in case the content overflows And scrolling will work fine. But currently this is only supported by Firefox ( if this info has changed by the time you're reading this, please comment to let me know ).

How do I make a scrollbar appear in overflow overflow?

For example, overflow: scroll hidden would set overflow-x to scroll and overflow-y to hidden. If you only want scrollbars to appear when there is more content than can fit in the box, use overflow: auto. This allows the browser to determine if it should display scrollbars.

What is the use of overflow X in HTML?

Definition and Usage. The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.

1 Answers

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>
like image 129
Umesh Avatar answered Nov 09 '22 01:11

Umesh
Sign in to Comment

Related questions

bootstrap tooltip\popover - solving inconsistent placement to the left
Validate all fields at once with HTML5 instead of one at a time
Move transform-origin back to the center of the element in CSS
Webpack not building because CssSyntaxError
Why does Google Chrome 9 not show images from Amazon S3?
Chrome 21 scaling elements during rotation
Getting Border Width in jQuery
Is it possible to "step through" a browser's applying of CSS rules for web development?
IntroJS Bootstrap Menu doesn't work
Select element cause a scroll to top of the page on iOS devices
Caret position when centering with flexbox in contenteditable
Error on change style of page with jquery
Bullet proof solution for page break on table row (<tr>) for printing
How to print page number while printing html in new Chrome?
How to know if two text nodes are visually consecutive
Input's caret height
Angular 1.x ngAnimate in Shadow DOM doesn't register animation times or add enter/leave classes

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!