Push css table cell out of browser window

Question

I'm working on a layout where different cells in a css table are supposed to push each other out of the browser window, if their size increases. The content of the cells is dynamically loaded via ajax. It's difficult to describe, so I made a sketch:

This is the initial state of the css table:

If cell 1 increases in width, it is supposed to go beyond the browser window:

But if cell 3 increases in width, it is supposed to push the other cells beyond the browser window:

I hope this makes it clear, if not I will try to describe it in more detail. Thanks in advance!

Answer 1

Is this what you want?

#parent {
  background-color: khaki;
  height: 200px;
  margin-top: 100px;
  display: flex;
  flex-direction: row-reverse;
  /* comment it out to remove the scrollbar */
  overflow: auto;
}

#left-child {
  margin: 50px 10px 0 0;
  background-color: coral;
  height: 100px;
  order: 3;
  /* change min-width to change the width of the div */
  min-width: 1000px;
  /* min-width: 100px; */
}
#middle-child {
  margin: 50px 10px 0 0;
  background-color: lightblue;
  height: 100px;
  order: 2;
  /* change min-width to change the width of the div */
  min-width: 1000px;
  /* min-width: 100px; */
}
#right-child {
  margin: 50px 10px 0 0;
  background-color: lightgreen;
  height: 100px;
  order: 1;
  /* change min-width to change the width of the div */
  min-width: 1000px;
  /* min-width: 100px; */
}

<div id="parent">
  <div id="left-child"></div>
  <div id="middle-child"></div>
  <div id="right-child"></div>
</div>

go to this jsfiddle and try.