Collapsible menu doesn't show when content to the right is too wide

February 27, 2024

I have a simple page with a menu on the side which can be opened/closed by clicking a button in a title bar. However, when the table is wider than the view the menu does not open.

Or rather, it does, but it opens underneath the table/content div (this can be seen by removing overflow:hidden; from #menu.

I can’t quite work out what combination of flex/width settings are causing the issue.

What should happen is that when the menu opens the div containing the table shifts to the right.

Below is the code example:

document.getElementById('menu-toggle').addEventListener('click', function() {
  document.getElementById('menu').classList.toggle('closed');
});

.top-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#title-bar {
  background-color: grey;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  height: 10vh;
}

#menu-container {
  display: flex;
  flex-grow: 1;
}

#menu {
  background-color: #f4f4f4;
  width: 250px;
  transition: width 0.3s ease;
  height: 100%;
  overflow: hidden;
}

#menu.closed {
  width: 0;
}

#content {
  flex-grow: 1;
  padding: 10px;
  height: 90vh;
}

#menu-toggle {
  cursor: pointer;
  padding: 10px;
  font-size: 1.2em;
}

.container {
  display: flex;
  flex-direction: column;
  height: 95%;
  padding: 0;
  margin: 5px;
}

.table-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  margin: 5px;
}

.details-panel {
  margin: 5px;
}

table {
  margin: 0;
  border-collapse: collapse;
}

th {
  white-space: nowrap;
  text-align: left;
  border: 1px solid black;
  background: grey;
  color: white;
  padding: 5px;
}

td {
  white-space: nowrap;
  border: 1px solid black;
  padding: 2px 10px;
}

<div class="top-container">
  <div id="title-bar">
    <div id="menu-toggle">&#9776;</div>
  </div>
  <div id="menu-container">
    <div id="menu" class="closed">
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
    </div>
    <div id="content">
      <div class="container">
        <table>
          <thead>
            <tr>
              <th>head1</th>
              <th>head2</th>
              <th>head3</th>
              <th>head4</th>
              <th>head5</th>
              <th>head6</th>
              <th>head7</th>
              <th>head8</th>
              <th>head9</th>
              <th>head10</th>
              <th>head11</th>
              <th>head12</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>cell1_12222222222222222222222222222222222222222222222</td>
              <td>cell2_12222222222222222222222222222222222222222222222</td>
              <td>cell3_12222222222222222222222222222222222222222222222</td>
              <td>cell4_12222222222222222222222222222222222222222222222</td>
              <td>cell5_12222222222222222222222222222222222222222222222</td>
              <td>cell6_12222222222222222222222222222222222222222222222</td>
              <td>cell7_12222222222222222222222222222222222222222222222</td>
              <td>cell8_12222222222222222222222222222222222222222222222</td>
              <td>cell9_12222222222222222222222222222222222222222222222</td>
              <td>cell10_1</td>
              <td>cell11_1</td>
              <td>cell12_1</td>
            </tr>
            <tr>
              <td>cell1_2</td>
              <td>cell2_2</td>
              <td>cell3_2</td>
              <td>cell4_2</td>
              <td>cell5_2</td>
              <td>cell6_2</td>
              <td>cell7_2</td>
              <td>cell8_2</td>
              <td>cell9_2</td>
              <td>cell10_2</td>
              <td>cell11_2</td>
              <td>cell12_2</td>
            </tr>
            <tr>
              <td>cell1_3</td>
              <td>cell2_3</td>
              <td>cell3_3</td>
              <td>cell4_3</td>
              <td>cell5_3</td>
              <td>cell6_3</td>
              <td>cell7_3</td>
              <td>cell8_3</td>
              <td>cell9_3</td>
              <td>cell10_3</td>
              <td>cell11_3</td>
              <td>cell12_3</td>
            </tr>
            <tr>
              <td>cell1_4</td>
              <td>cell2_4</td>
              <td>cell3_4</td>
              <td>cell4_4</td>
              <td>cell5_4</td>
              <td>cell6_4</td>
              <td>cell7_4</td>
              <td>cell8_4</td>
              <td>cell9_4</td>
              <td>cell10_4</td>
              <td>cell11_4</td>
              <td>cell12_4</td>
            </tr>
            <tr>
              <td>cell1_5</td>
              <td>cell2_5</td>
              <td>cell3_5</td>
              <td>cell4_5</td>
              <td>cell5_5</td>
              <td>cell6_5</td>
              <td>cell7_5</td>
              <td>cell8_5</td>
              <td>cell9_5</td>
              <td>cell10_5</td>
              <td>cell11_5</td>
              <td>cell12_5</td>
            </tr>
            <tr>
              <td>cell1_6</td>
              <td>cell2_6</td>
              <td>cell3_6</td>
              <td>cell4_6</td>
              <td>cell5_6</td>
              <td>cell6_6</td>
              <td>cell7_6</td>
              <td>cell8_6</td>
              <td>cell9_6</td>
              <td>cell10_6</td>
              <td>cell11_6</td>
              <td>cell12_6</td>
            </tr>
            <tr>
              <td>cell1_7</td>
              <td>cell2_7</td>
              <td>cell3_7</td>
              <td>cell4_7</td>
              <td>cell5_7</td>
              <td>cell6_7</td>
              <td>cell7_7</td>
              <td>cell8_7</td>
              <td>cell9_7</td>
              <td>cell10_7</td>
              <td>cell11_7</td>
              <td>cell12_7</td>
            </tr>
            <tr>
              <td>cell1_8</td>
              <td>cell2_8</td>
              <td>cell3_8</td>
              <td>cell4_8</td>
              <td>cell5_8</td>
              <td>cell6_8</td>
              <td>cell7_8</td>
              <td>cell8_8</td>
              <td>cell9_8</td>
              <td>cell10_8</td>
              <td>cell11_8</td>
              <td>cell12_8</td>
            </tr>
            <tr>
              <td>cell1_9</td>
              <td>cell2_9</td>
              <td>cell3_9</td>
              <td>cell4_9</td>
              <td>cell5_9</td>
              <td>cell6_9</td>
              <td>cell7_9</td>
              <td>cell8_9</td>
              <td>cell9_9</td>
              <td>cell10_9</td>
              <td>cell11_9</td>
              <td>cell12_9</td>
            </tr>
            <tr>
              <td>cell1_10</td>
              <td>cell2_10</td>
              <td>cell3_10</td>
              <td>cell4_10</td>
              <td>cell5_10</td>
              <td>cell6_10</td>
              <td>cell7_10</td>
              <td>cell8_10</td>
              <td>cell9_10</td>
              <td>cell10_10</td>
              <td>cell11_10</td>
              <td>cell12_10</td>
            </tr>
            <tr>
              <td>cell1_11</td>
              <td>cell2_11</td>
              <td>cell3_11</td>
              <td>cell4_11</td>
              <td>cell5_11</td>
              <td>cell6_11</td>
              <td>cell7_11</td>
              <td>cell8_11</td>
              <td>cell9_11</td>
              <td>cell10_11</td>
              <td>cell11_11</td>
              <td>cell12_11</td>
            </tr>
            <tr>
              <td>cell1_12</td>
              <td>cell2_12</td>
              <td>cell3_12</td>
              <td>cell4_12</td>
              <td>cell5_12</td>
              <td>cell6_12</td>
              <td>cell7_12</td>
              <td>cell8_12</td>
              <td>cell9_12</td>
              <td>cell10_12</td>
              <td>cell11_12</td>
              <td>cell12_12</td>
            </tr>
          </tbody>
        </table>
        <div class="details-panel">
          <p>Some detail text about the table above.
            <p>
        </div>
      </div>
    </div>
  </div>
</div>

>Solution :

take a look at the 3 classes at the end, I left comments on changes

document.getElementById('menu-toggle').addEventListener('click', function() {
  document.getElementById('menu').classList.toggle('closed');
});

.top-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#title-bar {
  background-color: grey;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  height: 10vh;
}

#menu.closed {
  width: 0;
}

#menu-toggle {
  cursor: pointer;
  padding: 10px;
  font-size: 1.2em;
}

.container {
  display: flex;
  flex-direction: column;
  height: 95%;
  padding: 0;
  margin: 5px;
}

.table-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  margin: 5px;
}

.details-panel {
  margin: 5px;
}

table {
  margin: 0;
  border-collapse: collapse;
}

th {
  white-space: nowrap;
  text-align: left;
  border: 1px solid black;
  background: grey;
  color: white;
  padding: 5px;
}

td {
  white-space: nowrap;
  border: 1px solid black;
  padding: 2px 10px;
}

#menu-container {
  display: flex;
  flex-direction: row; /* for horizontal layout */
  flex-grow: 1;
}

#menu {
  flex-shrink: 0; /* no shrinking */
   background-color: #f4f4f4;
    /* your styles */
  width: 250px;
  transition: width 0.3s ease;
  height: 100%;
  overflow: hidden;
}

#content {
  flex-grow: 1;
  flex-shrink: 1; /* shrink content */
  overflow: auto; 
  /* your styles */
   flex-grow: 1;
  padding: 10px;
  height: 90vh;
}

<div class="top-container">
  <div id="title-bar">
    <div id="menu-toggle">&#9776;</div>
  </div>
  <div id="menu-container">
    <div id="menu" class="closed">
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
    </div>
    <div id="content">
      <div class="container">
        <table>
          <thead>
            <tr>
              <th>head1</th>
              <th>head2</th>
              <th>head3</th>
              <th>head4</th>
              <th>head5</th>
              <th>head6</th>
              <th>head7</th>
              <th>head8</th>
              <th>head9</th>
              <th>head10</th>
              <th>head11</th>
              <th>head12</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>cell1_12222222222222222222222222222222222222222222222</td>
              <td>cell2_12222222222222222222222222222222222222222222222</td>
              <td>cell3_12222222222222222222222222222222222222222222222</td>
              <td>cell4_12222222222222222222222222222222222222222222222</td>
              <td>cell5_12222222222222222222222222222222222222222222222</td>
              <td>cell6_12222222222222222222222222222222222222222222222</td>
              <td>cell7_12222222222222222222222222222222222222222222222</td>
              <td>cell8_12222222222222222222222222222222222222222222222</td>
              <td>cell9_12222222222222222222222222222222222222222222222</td>
              <td>cell10_1</td>
              <td>cell11_1</td>
              <td>cell12_1</td>
            </tr>
            <tr>
              <td>cell1_2</td>
              <td>cell2_2</td>
              <td>cell3_2</td>
              <td>cell4_2</td>
              <td>cell5_2</td>
              <td>cell6_2</td>
              <td>cell7_2</td>
              <td>cell8_2</td>
              <td>cell9_2</td>
              <td>cell10_2</td>
              <td>cell11_2</td>
              <td>cell12_2</td>
            </tr>
            <tr>
              <td>cell1_3</td>
              <td>cell2_3</td>
              <td>cell3_3</td>
              <td>cell4_3</td>
              <td>cell5_3</td>
              <td>cell6_3</td>
              <td>cell7_3</td>
              <td>cell8_3</td>
              <td>cell9_3</td>
              <td>cell10_3</td>
              <td>cell11_3</td>
              <td>cell12_3</td>
            </tr>
            <tr>
              <td>cell1_4</td>
              <td>cell2_4</td>
              <td>cell3_4</td>
              <td>cell4_4</td>
              <td>cell5_4</td>
              <td>cell6_4</td>
              <td>cell7_4</td>
              <td>cell8_4</td>
              <td>cell9_4</td>
              <td>cell10_4</td>
              <td>cell11_4</td>
              <td>cell12_4</td>
            </tr>
            <tr>
              <td>cell1_5</td>
              <td>cell2_5</td>
              <td>cell3_5</td>
              <td>cell4_5</td>
              <td>cell5_5</td>
              <td>cell6_5</td>
              <td>cell7_5</td>
              <td>cell8_5</td>
              <td>cell9_5</td>
              <td>cell10_5</td>
              <td>cell11_5</td>
              <td>cell12_5</td>
            </tr>
            <tr>
              <td>cell1_6</td>
              <td>cell2_6</td>
              <td>cell3_6</td>
              <td>cell4_6</td>
              <td>cell5_6</td>
              <td>cell6_6</td>
              <td>cell7_6</td>
              <td>cell8_6</td>
              <td>cell9_6</td>
              <td>cell10_6</td>
              <td>cell11_6</td>
              <td>cell12_6</td>
            </tr>
            <tr>
              <td>cell1_7</td>
              <td>cell2_7</td>
              <td>cell3_7</td>
              <td>cell4_7</td>
              <td>cell5_7</td>
              <td>cell6_7</td>
              <td>cell7_7</td>
              <td>cell8_7</td>
              <td>cell9_7</td>
              <td>cell10_7</td>
              <td>cell11_7</td>
              <td>cell12_7</td>
            </tr>
            <tr>
              <td>cell1_8</td>
              <td>cell2_8</td>
              <td>cell3_8</td>
              <td>cell4_8</td>
              <td>cell5_8</td>
              <td>cell6_8</td>
              <td>cell7_8</td>
              <td>cell8_8</td>
              <td>cell9_8</td>
              <td>cell10_8</td>
              <td>cell11_8</td>
              <td>cell12_8</td>
            </tr>
            <tr>
              <td>cell1_9</td>
              <td>cell2_9</td>
              <td>cell3_9</td>
              <td>cell4_9</td>
              <td>cell5_9</td>
              <td>cell6_9</td>
              <td>cell7_9</td>
              <td>cell8_9</td>
              <td>cell9_9</td>
              <td>cell10_9</td>
              <td>cell11_9</td>
              <td>cell12_9</td>
            </tr>
            <tr>
              <td>cell1_10</td>
              <td>cell2_10</td>
              <td>cell3_10</td>
              <td>cell4_10</td>
              <td>cell5_10</td>
              <td>cell6_10</td>
              <td>cell7_10</td>
              <td>cell8_10</td>
              <td>cell9_10</td>
              <td>cell10_10</td>
              <td>cell11_10</td>
              <td>cell12_10</td>
            </tr>
            <tr>
              <td>cell1_11</td>
              <td>cell2_11</td>
              <td>cell3_11</td>
              <td>cell4_11</td>
              <td>cell5_11</td>
              <td>cell6_11</td>
              <td>cell7_11</td>
              <td>cell8_11</td>
              <td>cell9_11</td>
              <td>cell10_11</td>
              <td>cell11_11</td>
              <td>cell12_11</td>
            </tr>
            <tr>
              <td>cell1_12</td>
              <td>cell2_12</td>
              <td>cell3_12</td>
              <td>cell4_12</td>
              <td>cell5_12</td>
              <td>cell6_12</td>
              <td>cell7_12</td>
              <td>cell8_12</td>
              <td>cell9_12</td>
              <td>cell10_12</td>
              <td>cell11_12</td>
              <td>cell12_12</td>
            </tr>
          </tbody>
        </table>
        <div class="details-panel">
          <p>Some detail text about the table above.
            <p>
        </div>
      </div>
    </div>
  </div>
</div>