css overflow x not working

Question

I am trying to put multiple divs (image -> black blocks) in a container (image -> blue block). I need to put the maximum divs as possible in the container. The container have a "floating" width, so it has different sizes in each screen. The "1" (in the image) represents what i have today, it is working.

The problem is that i am using bootstrap popover in the entire site, but the overflow in the container does not allow it to appear. If I remove the overflow property ("2" in the image) all divs appear in a "lower" line. I do not want to scroll, just hide the divs that does not fit in the container.

The "3" in the image represents what I want.

Here is 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 then you will need to do:

overflow-x: scroll;

Answer 2

Option 1: You can remove the overflow properties from your styles. And the popup will appear as expected. Applying properties inline resolves the issue in the Code snippet check out the snippet shown below.

Option 2: IF Feasible for your case : You can use overflow hidden, but you need to have padding-top for the ".content-bar" class. The padding 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>