Выдвиньте ячейку таблицы CSS из окна браузера

Question

Я работаю над макетом, где разные ячейки в таблице CSS должны выталкивать друг друга из окна браузера, если их размер увеличивается. Содержимое ячеек динамически загружается через ajax. Это сложно описать, поэтому я сделал набросок:

Это начальное состояние таблицы css:

Если ячейка 1 увеличивается в ширину, она должна выходить за пределы окна браузера:

Но если ячейка 3 увеличивается в ширину, она должна вытолкнуть другие ячейки за пределы окна браузера:

Надеюсь, это проясняет ситуацию, если нет, я постараюсь описать это более подробно. Заранее спасибо!

Answer 1

Это то, что вы хотите?

#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>

перейдите к этому jsfiddle и попробуйте.