I am currently working on a project where I need to place multiple divs (represented by black blocks) within a container (depicted as a blue block). The challenge is to fit in as many divs as possible within the container, which has a variable width and different sizes on each screen.
Currently, the setup I have (shown as "1" in the image) is functional. However, I am facing an issue with using Bootstrap popover throughout the site. The overflow in the container prevents the popover from appearing. If I remove the overflow property ("2" in the image), all the divs move to a new line, which is not the desired outcome. My goal is to hide any divs that do not fit within the container without requiring scrolling.
The ideal solution would look similar to the arrangement shown as "3" in the image.
https://i.sstatic.net/H1Evu.png
Below are snippets of my code:
// 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>