skip to Main Content

I have the following html (JSFiddle):

<div class="d-flex" style="max-width: 1460px;">
   <div style="width: 100%; background: red;">
      <div class="table-responsive">
         <table class="table">
            <tbody>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
   <div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
      2
   </div>
</div>

As you can see from the JSFiddle, the content is being pushed off screen to the right even though I am using the responsive table class. The layout is supposed to be main content + sidebar content, but the sidebar content is being pushed off screen for some reason. Could someone point me in the right direction please?

2

Answers


  1. Flex doesn’t like its item with width and would rather handle that on its own.
    So I removed one div with width: 100% and it worked.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    
    <div class="d-flex" style="max-width: 1460px;">
      <div class="table-responsive">
        <table class="table">
          <tbody>
            <tr>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
            </tr>
            <tr>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
            </tr>
            <tr>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
              <td>Example</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
        2
      </div>
    </div>
    Login or Signup to reply.
  2. The sidebar is being pushed off the side of the viewport because of:

    • The width: 100% on the .table-responsive element’s <div> parent.
    • The fact that elements have min-width: min-content by default in a horizontal flex layout.

    Consider removing the width: 100% and apply min-width: 0 to override the min-width: min-content.

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
    <div class="d-flex" style="max-width: 1460px;">
       <div style="min-width: 0; background: red;">
          <div class="table-responsive">
             <table class="table">
                <tbody>
                   <tr>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                   </tr>
                   <tr>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                   </tr>
                   <tr>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                      <td>Example</td>
                   </tr>
                </tbody>
             </table>
          </div>
       </div>
       <div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
          2
       </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search