将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并尝试。