2

I have the following HTML and CSS which works okay for most cases in that the content is centered, but when the width of the browser becomes smaller than the oversized block the content remains centered and scrolling to the left does not show the content on the left. Is there something I can do to the CSS for .oversized to handle this scenario?

main {
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.oversized {

    display: flex;
    justify-content: center;
    margin: 0 auto;

}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px;
  white-space: nowrap;
}
<main>
  <p>Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content</p>
  <div class="oversized">
    <table>
      <tr>
        <td>This table is a bit oversized slkfjs lkfjlksaf lksdjflk sajflksj lksjflk sfjlkj slkfj slkafjkls afjlksafj;lksadjf lksajf</td>
        <td>sajflksj lksjflk sfjlkj slkfj slkafjkls afjlksafj;lksadjf lksajf</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>aaskdfjalksdfjklasdjfklsaj lksdjflk slkfjs lkfjlksaf lksdjflk sajflksj lksjflk sfjlkj slkfj slkafjkls afjlksafj;lksadjf lksajf</td>
        <td>sajflksj lksjflk sfjlkj slkfj slkafjkls afjlksafj;lksadjf lksajf</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
    </table>
  </div>
          <p>Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content Normal content</p>
    </main>

Added in CodePen as well https://codepen.io/trajano/pen/YzXVrpE so you can see the full width.

The answers in Can't scroll to top of flex item that is overflowing container do not resolve the issue as it shifts the content to the right to align with the <main> element.

Archimedes Trajano
  • 35,625
  • 19
  • 175
  • 265
  • It doesn't seem to be easy to deal with, The scroll bar will not appear if you exceed the parent element from the left and top. I don't know if this scheme was designed by the designer or if it was a bug. – 多一点点爱 Feb 28 '20 at 02:39
  • the answer to the linked one does not work since it shifts the oversized element to the right. – Archimedes Trajano Feb 28 '20 at 15:19
  • the solution is to shift the element to the right because the scroll cannot cover the element overflowing on the left. In other words, you cannot make the scroll to work on both left and right overflow – Temani Afif Feb 28 '20 at 20:15
  • The previously, and now again, linked duplicate may not contain the answer you want to hear. But your question addresses the same problem. And the duplicate explains the cause of the problem and provides various solutions (with descriptions of their limitations). Any new answers should be posted there. – Michael Benjamin Mar 06 '20 at 01:35

0 Answers0