css - 我怎样才能使一个动态大小受限的父 div 包含两个可变大小的子 div，每个子 div 都可以独立地自动滚动？

Question

考虑以下结构:

<div id="PARENT_DIV">
    <div id="LEFT_CHILD_DIV">

    </div>
    <div id="RIGHT_CHILD_DIV">

    </div>
</div>

PARENT_DIV 的要求:

• PARENT_DIV 将通过 z-index 放置在所有其他 GUI 元素的前面.

• PARENT_DIV 应根据 LEFT_CHILD_DIV 和 RIGHT_CHILD_DIV 的可变大小水平和垂直扩展，但仅限于特定点.例如，我需要能够设置相当于 max-width 的值和 max-height在 PARENT_DIV 上。对于垂直高度，PARENT_DIV 应该扩展到较高的子 div 的高度(但仍然只能达到 max-height )，而另一个子 div 应该 float 到顶部。

  <
• 我需要能够通过各种方式在屏幕上任意放置 PARENT_DIV(例如，top: Ypx; left: Xpx; 或 top: Y%; left: X%; 或 top: 50%; left: 50%; transform: translate(50%, 50%); 等)。

**LEFT_CHILD_DIV 和 RIGHT_CHILD_DIV 的要求:**

• LEFT_CHILD_DIV 和 RIGHT_CHILD_DIV 应根据其内容水平和垂直扩展，但只能扩展到特定点。例如，我需要能够设置相当于 max-width 的值和 max-height独立于 LEFT_CHILD_DIV 和 RIGHT_CHILD_DIV。

• LEFT_CHILD_DIV 和 RIGHT_CHILD_DIV 应该始终并排放置，无论它们的上限宽度如何。

• LEFT_CHILD_DIV 和 RIGHT_CHILD_DIV 应该在它们不能再长高时各自/独立地垂直滚动它们的内容(由它们的 max-height 规则或 PARENT_DIV 的 max-height 规则，以先生效者为准。

请参阅this example Photoshop mock-up以直观地了解我要完成的工作。我一直无法找到关于如何准确完成上述内容的 CSS 相关教程。我发现了一些零碎的东西，但它们组合在一起时不起作用。我已经尝试过许多 CSS 组合/变体规则，例如 display , overflow , box-sizing , position等，并且没有取得任何成功。如何使用 CSS 完成上述要求？

我可以使用 JavaScript 完成此操作，但我希望尽可能避免使用脚本，并以纯 CSS 方式执行此操作。

Answer 1

你可以像这样使用 flexbox:

#PARENT_DIV {
  position:absolute;
  top:50px;
  left:150px;
  border: 1px solid red;
  display: inline-flex;
  max-height: 200px;
  max-width: 300px;
  align-items: flex-start;
}

#LEFT_CHILD_DIV {
  border: 1px solid green;
  max-width: 180px;
  max-height: 100px;
  overflow: auto;
}

#LEFT_CHILD_DIV>div {
  height: 200px;
  width:200px;
  background:rgba(0,0,0,0.5);
  animation:change 2s infinite alternate linear;
}

#RIGHT_CHILD_DIV {
  border: 1px solid orange;
  max-width: 80px;
  max-height: 50px;
  overflow: auto;
}

#RIGHT_CHILD_DIV>div {
  width: 200px;
  height:300px;
  background:rgba(0,0,0,0.5);
  animation:change 2s 1s infinite alternate linear;
}

@keyframes change{
  to{width:5px;height:20px;}
}

<div id="PARENT_DIV">
  <div id="LEFT_CHILD_DIV">
    <div></div>
  </div>
  <div id="RIGHT_CHILD_DIV">
    <div></div>
  </div>
</div>