1

I am trying to make a page layout where a side navigation stays the same size and the main content resizes when the page resizes. Everything works fine until I resize lower than the length of the table element's size, in which the table gets moved out of view.

What is odd is that the table is still resizing, but it seems to be offset by the width of the side navigation.

I am relatively new to flexbox, so I'm sorry if the fix is super obvious

Here is the jsfiddle if that is easier: https://jsfiddle.net/gunnarhawk/rwjbhe12/1/

* {
    padding: 0;
    margin: 0;
    outline: none;
    box-sizing: border-box;
}

.left-container {
    flex-basis: 250px;
    border-right: 1px solid grey;
    padding: 25px;
    overflow: auto;
    flex-shrink: 0;
}

.section-title {
    color: grey;
    margin-bottom: 15px;
}

.section-content {
    white-space: nowrap;
}

.section-content a {
    text-decoration: none;
    color: #333;
    font-weight: 400;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    transition: all .3s;
}

.section-content a:hover {
    background-color: grey;
    color: white;
}

.section-content svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.right-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
}

.main-content {
    padding: 20px;
}
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

<body>
    <div class="d-flex">
        <div class="left-container">
    <!--LEFT-->
    <div class="left-menu-section">
      <div class="section-title">Apps</div>
      <div class="section-content d-flex flex-column">
        <a href="#" class="d-flex align-items-center">
          link
        </a>
        <a href="#" class="d-flex align-items-center">
          link
        </a>
      </div>
    </div>
  </div>
  <div class="right-container w-100 d-flex">
    <!--RIGHT-->
    <div class="container-fluid body-content">
      <div class="d-flex flex-column main-content justify-content-center">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
                <th class="hoverable-th">header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
              </tr>
              <tr>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
              </tr>
              <tr>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
              </tr>
              <tr>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
                <td>test row</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
  </body>
</html>
Gunnarhawk
  • 437
  • 3
  • 12

0 Answers0