css - 只要 body 和 sub sub div 滚动就缩放 div

Question

我遇到了以前从未遇到过的 CSS 问题。 我在页面右侧有一个 div (bs-pane)，它应该与正文一样高(不计算自身)。到目前为止，这适用于我的元素。在那个 bs-pane 里面，我有一个 sub-sub div (#bsresults)，当它太长时，必须滚动。 但没有任何效果。 奇怪的是，bs-pane 的高度与我元素中的内容一样长(还有更多的 css)，而且我只有 #bsresults 有问题。花了几个小时，我被困住了。 任何帮助表示赞赏。

#bs-pane {
min-width: 30em;
box-sizing: border-box;
position: absolute;
top: 80px;
right: 0;
z-index: 9000;
background-color: hsl(0, 0%, 100%);
box-shadow: -0.3em 0.3em 0.5em;
border-radius: 5px;
max-width: 50vw;
font-size: small;
font-family: arial,sans-serif;
max-height: calc(100% - 80px);
background-color:blue;
}
#bs-pane #bsresults {
box-sizing: border-box;
overflow-y: scroll;
overflow-x: hidden;
height: inherit;
padding: 2em;
background-color: hsla(24,80%,80%,0.5);
max-height: inherit;
}

这是完整的 fiddle :https://jsfiddle.net/3tqs6n0p/ 换句话说:蓝色/紫色 div 底部应该在最后一个“Blablabla”处结束，黄色 div 应该留在里面并滚动。 问题当然是后者的宽度和高度。

Answer 1

你的意思是:

#bs-pane {
  min-width: 30em;
	box-sizing: border-box;
	position: absolute;
	top: 80px;
	right: 0;
	z-index: 9000;
	background-color: hsl(0, 0%, 100%);
	box-shadow: -0.3em 0.3em 0.5em;
	border-radius: 5px;
	max-width: 50vw;
	font-size: small;
	font-family: arial,sans-serif;
	max-height: calc(100vh - 80px); /* change from 100% */
  background-color:blue;
  overflow-y:scroll; /* added */
}
#flextitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1em;
	position: absolute; /* changed from fixed */
	right: 0;
	background: white;
	padding: 1.5em 1em 2em 0em;
  background-color:red;
  height:4rem;
  width:10rem;
}
#bs-pane #bsresults {
	box-sizing: border-box;
	overflow-y: scroll;
	overflow-x: hidden;
	height: inherit;
	padding: 2em;
  background-color: hsla(24,80%,80%,0.5);
}

<div id="main">
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
</div>
<div id="bs-pane">
<div id="flextitle">
flextitle, fixed division
</div>
<div id="bsbelowtit">
	<div id="bsresults">
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  </div>
  </div>
</div>