JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
      <table>
        <tr>
          <td style="height: 100%">
            <div id="container">
              <div class="full">
                foo
              </div>
            </div>
          </td>
      </table>
    </div>

CSS

body, html {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .full {
        width: 100%;
        height: 100%;
        border: 10px solid red;
    }
    #content {
        width: 100%;
        height: 100%;
    }

    #content>table {
        width: 100%;
        height: 100%;
    }
    #content>table>tbody>tr>td {
        border: 10px solid blue;
    }
    #container {
        width: 100%;
        height: 100%;
        border: 10px solid black;
    }

JavaScript

// Works in Chrome, not in Firefox!?!?
// PS: I don't care that the borders go outside. The borders are there
// only to show the div(black) is not expanding to 100% even though
// the cell/td (blue) is.