Overflow-X不显示滚动条

Question

I have a container that I'm using to hold a table, and I'm trying to apply the overflow-x property, but there's something wrong with it. I've got a working codepen that I'll post in a moment, but the problem is that it doesn't go responsive. When the viewport closes in on it, it just "sticks" (I can't really explain it better than that, the Codepen shows it though). Here is the code:

<section class='main-container'>
    <h6>Users</h6>

    <table>

        <thead>
            <tr>
                <th class='name'>Name</th>
                <th class='email'>Email</th>
                <th class='role'>Role</th>
                <th class='status'>Status</th>
                <th class='alerts'>Alerts/Actions</th>
                <th class='delete'></th>
            </tr>
        </thead>

        <tbody>
    <tr>
      <td class='name'>Joe Bob</td>
      <td class='email'>bobjoe@me.com</td>
      <td class='role'>This is the role</td>
      <td class='status'>Approved</td>
      <td class='alerts'>There's an alert</td>
      <td class='delete'></td>
    </tr>
    <tr>
      <td class='name'>Joe Bob</td>
      <td class='email'>bobjoe@me.com</td>
      <td class='role'>This is the role</td>
      <td class='status'>Approved</td>
      <td class='alerts'>There's an alert</td>
      <td class='delete'></td>
    </tr>
    <tr>
      <td class='name'>Joe Bob</td>
      <td class='email'>bobjoe@me.com</td>
      <td class='role'>This is the role</td>
      <td class='status'>Approved</td>
      <td class='alerts'>There's an alert</td>
      <td class='delete'></td>
    </tr>
    <tr>
      <td class='name'>Joe Bob</td>
      <td class='email'>bobjoe@me.com</td>
      <td class='role'>This is the role</td>
      <td class='status'>Approved</td>
      <td class='alerts'>There's an alert</td>
      <td class='delete'></td>
    </tr>
    <tr>
      <td class='name'>Joe Bob</td>
      <td class='email'>bobjoe@me.com</td>
      <td class='role'>This is the role</td>
      <td class='status'>Approved</td>
      <td class='alerts'>There's an alert</td>
      <td class='delete'></td>
    </tr>

        </tbody>

    </table>

</section>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    border: none;
    color: #425563;
    -webkit-tap-highlight-color: transparent;
}

.main-container {

    --away-left: 20px;
  --border-radius: 2px;
  --shine-brand-blue: #425563;
  --shine-gray-two: #eceeef;
  --shine-gray-one: #f1f2f3;

  display: flex;
    width: calc(100% - 80px);
  max-width: 600px;
    margin-right: 40px;
    margin-left: 40px;
    margin-top: 40px;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    flex-flow: column nowrap;
    justify-content: flex-start;
    overflow-x: scroll;

    h6 {
        font-size: 16px;
        height: 50px;
        font-family: var(--main-font);
        color: var(--shine-brand-blue);
        line-height: 40px;
        width: 100%;
        border-bottom: 1px solid var(--shine-gray-two);
        padding-left: var(--away-left);
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    table {
        margin: 25px 0;
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        border-collapse: collapse;

        th, td {
            text-align: left;
            border-bottom: 1px solid #e0e3e5;
            &.name {min-width: 149px;}
            &.email {min-width: 230px;}
            &.role {min-width: 148px;}
            &.status {min-width: 82px;}
            &.alerts {min-width: 195px;}
            &.delete {min-width: 15px;}
        }

        th {
            font-size: 10px;
            font-weight: 500;
            color: #7d8d9a;
            text-transform: uppercase;
        }

        td {  
            font-size: 12px;
            font-weight: 500;
            line-height: 50px;
            color: var(--shine-brand-blue);

            select {
                height: 40px;
                width: 90%;
                min-width: 140px;
                border-radius: var(--border-radius);
                background-color: var(--shine-gray-one);
                cursor: pointer;
            }

        }

        tbody tr { 
            transition: all .3s;

            &:hover { background-color: #f5f6f7; }

        }

    }
}

main.next-to-aside {
    position: absolute;
    top: 60px;
    right: 0px;
}

How can I get the table to act responsive instead of just "sticking" like how it does in this Codepen?: https://codepen.io/adammcgurk/pen/aXyZxm

Answer 1

So I actually had to wrap the table in a div . Using only the section wouldn't work, because it contained more children than just the table . So the boilerplate code looked like this:

<style>
    .responsive-table {
        overflow-x: scroll;
    }
</style>

<section class='main-container'>
    <!-- other content -->
    <div class='responsive-table'>
        <table>
             <!-- table content -->
        </table>
    </div>
</section>