How can I set overflow:hidden for the HTML but set scroll for the tables?

Question

I created two tables parallel to each other, and I set both tables to scroll when they overflow and I set overflow:hidden for the HTML, but it's not working, I can't get the tables to scroll when they overflow, I have set the tables to scroll before but it didn't work either, what am I doing wrong? Any help is appreciated.

Thanks in advance.

        html,
        body {
          padding: 0;
          margin: 0;
          overflow: hidden;
          width: 100%;
          height: 100%;
        }
        .mainFrame {
          position: absolute;
          overflow: hidden;
          margin: 2px 4px 4px 2px;
          min-width: calc(100% - 7px);
          min-height: calc(100% - 7px);
          border: 1px solid red;
          display: flex;
        }
        .frame1 {
          width: calc(50% - 6px);
          margin: 108px 3px 3px 3px;
          min-height: 100%;
          background-color: green;
          float: left;
          border-radius: 3px;
          overflow: scroll;
        }
        .frame2 {
          width: calc(50% - 6px);
          margin: 108px 3px 3px 3px;
          min-height: 100%;
          background-color: green;
          float: right;
          border-radius: 3px;
          overflow: scroll;
        }





  
  doubleFrame.html




  


    
      
        
          
            
          
          
          
        
      
    

    
      
        
          
            aaa
            aaa
          
        
        
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as
          
          
            as
            as

Gerard van Helden · Accepted Answer

You aren't confining the height of the frame by only setting the min-height. You would either need height (to set it to a fixed height) or max-height. This, in combination with the overflow set to scroll or auto (where the latter only shows a scroll bar when necessary) should work as expected.

How can I set overflow:hidden for the HTML but set scroll for the tables?

Answers (2)

Related Questions