Css x overflow not working

Question

I am trying to put several divs in the container (image → black blocks) (image → blue block). I need to set max divs to container. The container has a "floating" width, so on each screen it has different sizes. "1" (in the image) represents what I have today, it works.

The problem is that I use bootstrap popover throughout the site, but overflow in the container prevents it from being displayed. If I remove the overflow property ("2" in the image), all divs will appear on the "bottom" line. I don't want to scroll, just hide divs that don't fit in the container.

The “3” in the image represents what I want.

Here are my codes:

// CSS .content-bar{ max-width:100%; height: 3.5em; white-space:nowrap; display: inline-block; overflow-x: hidden; overflow-y: visible; } .photo-bar{ width: 2.5em; height: 3.5em; margin-right: -.55em; padding: 0; display: inline-block; white-space: normal; } // JS <div class="content-bar"> <div class="photo-bar" ng-repeat="..."> // image goes here </div> </div> 

Answer 1

If you want it to be scrollable, you will need to do:

 overflow-x: scroll; 

Answer 2

Option 1: You can remove overflow properties from your styles. And a popup will appear as expected. Applying the inline properties fixes the problem in the code snippet to check the snippet below.

Option 2: IF Maybe for your case: You can use the overflow covertly, but you need to have a padding-top for the ".content-bar" class. The top of the top should be the height of the popup.

 // CSS .content-bar{ max-width: 100%; height: 3.5em; white-space: nowrap; display: block; overflow-x: scroll; /*overflow-y: visible;*/ } .photo-bar { width: 2.5em; height: 3.5em; margin-right: -.55em; padding: 5px; display: inline-block; white-space: normal; background-color: lightblue; border: 1px solid; } 

 <div class="content-bar" style="white-space: nowrap;overflow-x: scroll;"> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> <div class="photo-bar"> <img src="http://placehold.it/50x10" /> </div> </div> 

Answer 3

I believe you are looking for overflow-x: scroll;