css - 更改字体大小而不影响 div 父高度

Question

我正在更改 div 中的字体大小。
问题是，如果我要求将字体大小设置得更大，则容器 div 正在调整大小。
我在 css 中要求滚动内容，那么为什么要调整这个 div 的大小？

.tileText {
 box-sizing: border-box;
 position: relative;
 display: block;
 overflow-y: scroll;
 width: 70%;
 height: 100%;
 padding: 20px;
 color: #05083c;
 font-size: 1rem;
 border-radius: 5px;
 font-weight: 400;
 line-break: anywhere;
 white-space: pre-wrap;
 overflow-wrap: break-word;
 background-color: white;
 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
}

https://jsfiddle.net/70bsL2yp/8/

Answer 1

tileText 实际上是您获取文本的容器。所以添加 max-height: 5rem;至 .tileText{}瞧!问题解决了:

.tileText {
  ...
  ...
  max-height: 5rem;
}

或者您可以指定 .tileText另一个单位的高度，如 rem 而不是百分比。
.tileText {
...
...
高度:10rem；
}