Max out a table height, and include a scroll bar when reached in JavaScript/React.js

I have this table:

      <Table striped bordered hover align="right" height="200px" width="200px" border="1px solid #000000" className='table'>
        <thead>
          <tr>
            <th className="text">Last Time</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td className="text">{this.state.myArray.join(", ")}</td>
          </tr>
        </tbody>
      </Table>

the file is importing my css file, styles.scss:

.table {
    maxHeight: '200px';
    overflowY: auto;
}

I found instructions to add this in .css to max out the height and when the height is reached, start a scroll bar, but it’s not working. Does this work with a SCSS file?

Answer

On the .table tag in your CSS page, make sure that display: block. The scroll should work then.

The full CSS:

.table {
    border: 1px solid black;
    max-height: 200px;
    overflow-y: auto;
    display: block;
}