How to centre iframes within DIV and stop overflow

HTML & CSS
1

I have iframes which are appended by ajax, I want them to be centred on the screen side by side which I have got working but I also want them to start a new line centred again when they are bigger than the DIV width container.

Code below centres a number of iframes but they overflow the container. I tried overflow auto but this did not work
CodePen link

<!DOCTYPE html>
<html>
  <head>
  <style>
 body{
    width: 100%;
    }
  #viewRangerContainer{
    border: solid;
    position: absoulte;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    width: 100%;
    height: auto;
  }
  .viewRangerFrame{
    border: solid;
    position: relative;
    display: inline-block;
    height: 90px;
    width: 8vw;
    margin-left: auto;
    margin-right: auto;
  }
    </style>
</head>
<body>
 <div id="viewRangerContainer">
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
   <iframe class="viewRangerFrame"></iframe>
 </div> 
</body>
</html>
2

Welcome to the forums, @sbrackstone. smile

To see what is going on, we either need both the HTML and CSS code for the entire section, or a link to a live page or CodePen which demonstrates the issue.

3

I have edited the code and added codepen link. was originally doing all this is pure css divs but now trying Flex

4

I think I have it working so far. Added flex-wrap: wrap to #viewRangerContainer and removed the justify and align parts

    #viewRangerContainer{
      border: solid;
      position: absoulte;
      display: flex;
      overflow: auto;
      flex-wrap: wrap;
      width: 100%;
      height: auto;
    }

just need to add this to my main site and see if it work responsively

5

Typo alert :slight_smile:
You probably don’t want it absolute anyway :wink:

Flex items will not wrap unless you add that property value to the parent flex container and items will just keep stacking along the axis until they overflow.

That sounds like you have solved the problem :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.