"overflow: auto" doesn't prevent wide div from breaking table layout

Question

I'm making a web page where arbitrary markup can appear within a table view cell. I'd like the contents of that cell to have overflow: auto behavior rather than breaking the layout of the rest of the table. Unfortunately, simply wrapping the content in a <div style='overflow: auto'> doesn't work—the cell sizes to fit the content anyway.

Here's an example that demonstrates the problem:

<table style='width: 100%'>
    <td style='width: 300px'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod id mauris eu consequat. Aenean semper porttitor blandit. Pellentesque ligula velit, varius in libero nec, placerat ultricies nunc. Curabitur ultrices convallis ante quis ultrices. Praesent a rhoncus quam. Proin auctor justo orci, molestie faucibus neque efficitur eu. Suspendisse eleifend eu neque id elementum.
    </td>
    <td>
        <div style='overflow: auto'>
            <div style='width: 2000px'>
                Phasellus convallis ipsum ac libero scelerisque rutrum. Nam erat sapien, laoreet sed odio ut, iaculis pretium sem. Sed condimentum molestie metus, volutpat eleifend sem hendrerit sed. Mauris tempus a tellus in accumsan. Integer accumsan mauris ut risus pellentesque tincidunt. Aliquam magna est, accumsan vel laoreet a, sollicitudin eu dolor. Ut et ex elit. Pellentesque sed dui suscipit erat tempor molestie.
            </div>
        </div>
    </td>
</table>

Ideally, the table in that example would fill 100% of its container's width, the left cell would be 300 pixels wide, and the right cell would become scrollable in order to fit the remaining width. But as it is, the table grows past 100% to fit both cells, squeezing the left cell down below 300 pixels, and nothing becomes scrollable. Is there a way to make the right cell scrollable rather than resizing the entire table?

Answer 1

from my comment:

table-layout:auto is the default and allows the table's width to grow according to its content(your issue) , you set width:100% to table, a table-layout set to fixed is the only way to set and fix that width to 100% and not grow., else , you need position:relative/absolute to take the wide div off the flow and the table not see its width. would position be an option ? it can have side's effect if the first cell has no width/content.

an example with position:

td {
  position: relative;
}

td>[style='overflow: auto'] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<table style='width: 100%'>
  <td style='width: 300px'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod id mauris eu consequat. Aenean semper porttitor blandit. Pellentesque ligula velit, varius in libero nec, placerat ultricies nunc. Curabitur ultrices convallis ante quis ultrices. Praesent
    a rhoncus quam. Proin auctor justo orci, molestie faucibus neque efficitur eu. Suspendisse eleifend eu neque id elementum.
  </td>
  <td>
    <div style='overflow: auto'>
      <div style='width: 2000px'>
        Phasellus convallis ipsum ac libero scelerisque rutrum. Nam erat sapien, laoreet sed odio ut, iaculis pretium sem. Sed condimentum molestie metus, volutpat eleifend sem hendrerit sed. Mauris tempus a tellus in accumsan. Integer accumsan mauris ut risus
        pellentesque tincidunt. Aliquam magna est, accumsan vel laoreet a, sollicitudin eu dolor. Ut et ex elit. Pellentesque sed dui suscipit erat tempor molestie.
      </div>
    </div>
  </td>
</table>

---

edit

flex and grid alternative examples :

• grid

.grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: solid 1px; 
  grid-gap:2px;
  padding:2px;
}

.grid>div {
  border: solid 1px; 
}

div {
  overflow: auto;
}

<div class="grid">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod id mauris eu consequat. Aenean semper porttitor blandit. Pellentesque ligula velit, varius in libero nec, placerat ultricies nunc. Curabitur ultrices convallis ante quis ultrices. Praesent
    a rhoncus quam. Proin auctor justo orci, molestie faucibus neque efficitur eu. Suspendisse eleifend eu neque id elementum.
  </div>
  <div>
    <div style='width: 2000px'>
      Phasellus convallis ipsum ac libero scelerisque rutrum. Nam erat sapien, laoreet sed odio ut, iaculis pretium sem. Sed condimentum molestie metus, volutpat eleifend sem hendrerit sed. Mauris tempus a tellus in accumsan. Integer accumsan mauris ut risus
      pellentesque tincidunt. Aliquam magna est, accumsan vel laoreet a, sollicitudin eu dolor. Ut et ex elit. Pellentesque sed dui suscipit erat tempor molestie.
    </div>
  </div>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div>
    <div style='width: 1000px'>
      Phasellus convallis ipsum ac libero scelerisque rutrum. Nam erat sapien, laoreet sed odio ut, iaculis pretium sem. Sed condimentum molestie metus, volutpat eleifend sem hendrerit sed. Mauris tempus a tellus in accumsan. Integer accumsan mauris ut risus
      pellentesque tincidunt. Aliquam magna est, accumsan vel laoreet a, sollicitudin eu dolor. Ut et ex elit. Pellentesque sed dui suscipit erat tempor molestie.
    </div>
  </div>
</div>

• flex

.grid {
  display: flex;
  border: solid 1px;
}

.grid>div {
  border: solid 1px;
  margin: 2px;
}

div:first-child {
  flex: 1 0 300px;
}

div:first-child+div {
  overflow: auto;
}

<div class="grid">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod id mauris eu consequat. Aenean semper porttitor blandit. Pellentesque ligula velit, varius in libero nec, placerat ultricies nunc. Curabitur ultrices convallis ante quis ultrices. Praesent
    a rhoncus quam. Proin auctor justo orci, molestie faucibus neque efficitur eu. Suspendisse eleifend eu neque id elementum.
  </div>
  <div>
    <div style='width: 2000px'>
      Phasellus convallis ipsum ac libero scelerisque rutrum. Nam erat sapien, laoreet sed odio ut, iaculis pretium sem. Sed condimentum molestie metus, volutpat eleifend sem hendrerit sed. Mauris tempus a tellus in accumsan. Integer accumsan mauris ut risus
      pellentesque tincidunt. Aliquam magna est, accumsan vel laoreet a, sollicitudin eu dolor. Ut et ex elit. Pellentesque sed dui suscipit erat tempor molestie.
    </div>
  </div>
</div>