只需使用一个伪元素并将.container设置为flex-direction: column:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: clip;
}
.container::before {
content: '';
}
伪元素::before的高度为0(因为我们没有指定任何高度)，所以用户看不见它.但是，如果它有一定的高度，我们的布局(没有display: flex)将如下所示:
┌────────────────────────┐
│ ::before │
├──────┬─────────────────┤
│ │ │
│.inner│ │
│ │ │
├──────┘ │
│ │
└────────────────────────┘
display: flex(使其成为弹性框)、flex-direction: column(垂直放置元素)和justify-content: space-between(元素之间的最大间距)的组合使这两个元素接触到两个相对的边:
┌────────────────────────┐
│ ::before │
├────────────────────────┤
│ │
├──────┐ │
│ │ │
│.inner│ │
│ │ │
└──────┴─────────────────┘
如果.container的身高不是子元素身高的总和，它会首先try 缩小子元素的身高.由于::before从一开始就没有任何高度，而.inner已经适合它的内容，所以它们之间的空间塌陷到0,.inner将是clip-pep:
┌────────────────────────┐
│ ::before │
├──────┬─────────────────┤
│ │ │
│.inner│ │
└──────┴─────────────────┘
试试看:
const container = document.querySelector('.container');
const input = document.querySelector('input');
input.addEventListener('input', function() {
container.style.height = this.value + 'px';
});
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 30px 0;
background-color: red;
overflow: clip;
height: 200px;
}
.container::before {
content: '';
}
.inner {
background-image: linear-gradient(green, yellow);
width: 200px;
}
<input type="range" min="100" max="1000" step="1" value="200">
<div class="container">
<div class="inner option1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum purus nec interdum tristique. Maecenas eleifend, libero nec varius cursus, lacus eros elementum odio, eget convallis risus erat ut velit. Pellentesque ut ex lobortis, hendrerit ipsum
ut, pretium dui. Morbi porta viverra eros eget malesuada. Praesent sed metus eu dui fermentum sagittis. Aliquam blandit ultricies hendrerit. Integer dignissim enim est, id vestibulum ante ultricies eu. Cras at est quis sem luctus finibus. Mauris in
maximus turpis.
</div>
</div>