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;
        }

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>doubleFrame.html</title>
</head>

<body>

  <div class="mainFrame">


    <div class="frame1">
      <table>
        <tr>
          <td>
            <input type="radio" value="" />
          </td>
          <td class="cod"></td>
          <td class="des"></td>
        </tr>
      </table>
    </div>

    <div class="frame2">
      <table>
        <thead>
          <tr>
            <td>aaa</td>
            <td>aaa</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
          <tr>
            <td class="codit">as</td>
            <td class="desit">as</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

</body>

</html>

are you looking like this.? jsfiddle.net/v6c1pjk3

Himesh Aadeshara
– Himesh Aadeshara

2015-08-24 12:25:06 +00:00
Commented Aug 24, 2015 at 12:25 — Himesh Aadeshara
– Himesh Aadeshara, Commented Aug 24, 2015 at 12:25

Gerard van Helden · Accepted Answer · 2015-08-24 12:30:03Z

1

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.

answered Aug 24, 2015 at 12:30

Gerard van Helden

1,61210 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle Over a year ago

oh, I didn't know that, thanks for helping me, I've used all of them, but only max-height gave me the expected result :D

Rodney Salcedo · Accepted Answer · 2015-08-24 12:52:15Z

0

The css properties: min-height, height and max-height are not the same, try

    .frame2 {
      width: calc(50% - 6px);
      margin: 108px 3px 3px 3px;
      min-height: 100%;
      /*Here you can see the diference*/
      height:200px;
      background-color: green;
      float: right;
      border-radius: 3px;
      overflow: scroll;
    }

answered Aug 24, 2015 at 12:52

Rodney Salcedo

1,26419 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related