CSS中复杂的拟合布局

Question

我有两个部分的内容，垂直排列：

+-------+
|   A   |
+-------+
|   B   |
+-------+

我需要 A 部分有一个未定义的高度（增长和缩小取决于它自己的内容）。

另一方面，部分 B 必须填满屏幕的剩余高度。

如果 A 部分有一个静态高度，这很容易，所以我会这样做：

.A{
    height:200px;
}
.B{
    height:calc(100% - 200px);
}

当 A 部分具有动态高度时，我该如何实现？ 我知道可以使用带有 clientHeight/offsetHeight 属性的 JS 来完成，但我更喜欢纯 CSS 解决方案。

附：包括引导程序。

编辑：

这两个部分的容器是slick-carousel 列表项。

示例：

$('.A').each(function(index, elem) {
  for (var i = 0; i < Math.random() * 4000; i++)
    elem.innerHTML += 'A ';
});
$('.B').each(function(index, elem) {
  for (var i = 0; i < Math.random() * 4000; i++)
    elem.innerHTML += 'B ';
});
$('#carousel').slick();

#carousel {
  width: 200px;
  max-height:300px;
}

.A {
  background-color: green;
}

.B {
  background-color: brown;
  overflow-y:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<ul id="carousel">
  <li>
    <section class="A"></section>
    <section class="B"></section>
  </li>
  <li>
    <section class="A"></section>
    <section class="B"></section>
  </li>
  <li>
    <section class="A"></section>
    <section class="B"></section>
  </li>
</ul>

Answer 1

您必须为光滑的容器设置高度，以便将高度强制为 li。

.slick-track, .slick-track li, .slick-track li div {
  height: 100%;
}

然后您可以使用 flexbox 创建列并将收缩和增长赋予 b 部分

.B {
  background-color: brown;
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
}

Js 也一样 https://jsfiddle.net/karthick6891/Lqzg3tj2/