Я пытаюсь полностью скрыть дочерние div при переполнении родителя по высоте. HTML:
* { margin: 0; }
.chat {
position: relative;
overflow-y: hidden;
height: 300px;
background-color: #ff99ff;
padding: 5px;
}
.message {
position: relarive;
background-color: #99ff99;
margin: 5px;
width: 100%;
}
<div class="chat">
<div class="message">
<p>Message 1: String 1</p>
<p>Message 1: String 2</p>
</div>
<div class="message">
<p>Message 2: String 1</p>
<p>Message 2: String 2</p>
<p>Message 2: String 3</p>
<p>Message 2: String 4</p>
</div>
<div class="message">
<p>Message 3: String 1</p>
<p>Message 3: String 2</p>
<p>Message 3: String 3</p>
</div>
<div class="message">
<p>Message 4: String 1</p>
<p>Message 4: String 2</p>
<p>Message 4: String 3</p>
</div>
<div class="message">
<p>Message 5: String 1</p>
<p>Message 5: String 2</p>
<p>Message 5: String 3</p>
<p>Message 5: String 4</p>
</div>
</div>
В данном примере — у родителя установлено свойство overflow-y: hidden
, но оно скрывает только ту часть div, которая не влезает в родителя. А как сделать, чтобы дочерний div скрывался полностью? В данном примере Message 5
должен исчезнуть полностью.
:last-child
? Ведь не помещаться в контейнер может не только один последний элемент