How to clip floated content - css

Question

The following code snippet displays some headlines, with some icons floated on the left. The parent div has a defined height, with scroll:auto set.
Currently, scrolling to the bottom looks like this:
However, I'd like to clip off the icons when the text entries end, so when scrolling to the bottom, it looks like this:
The reason for the use of float is so that when there are not many icons, the text flows like this:
.parent {
position: absolute;
height: 100px;
width: 400px;
overflow: scroll;
}
.content {
background-color: cyan;
padding: 6px;
}
.icon {
float: left;
clear: both;
background-color: lightpink;
width: 38px;
height: 38px;
margin-right: 8px;
margin-bottom: 6px;
}
.entry {
font-size: 18px;
}
<div class="parent">
<div class="content">
<img class="icon">
<img class="icon">
<img class="icon">
<img class="icon">
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div>
<div class="entry">Mauris in libero lacus</div>
</div>
</div>

Answer 1

Just smack a overflow: clip on your .content along with the sexy overflow-clip-margin: content-box.
Note on overflow-clip-margin: Safari doesn't support it (yet). Quick edit: Firefox has some issues with overflow-clip-margin's visual-box property too. My bad!
Without it, the images are still clipped but without caring about your .content padding. Shouldn't be an issue if your text isn't actually behind a cyan background-color; it's hard to tell on a white background.
.parent {
position: absolute;
height: 100px;
width: 400px;
overflow: scroll;
}
.content {
background-color: cyan;
padding: 6px;
overflow: clip;
overflow-clip-margin: content-box;
}
.icon {
float: left;
clear: both;
background-color: lightpink;
width: 38px;
height: 38px;
margin-right: 8px;
margin-bottom: 6px;
}
.entry {
font-size: 18px;
}
<div class="parent">
<div class="content">
<img class="icon">
<img class="icon">
<img class="icon">
<img class="icon">
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div>
<div class="entry">Mauris in libero lacus</div>
</div>
</div>

Answer 2

.parent {
position: absolute;
height: 100px;
width: 400px;
overflow: scroll;
}
.content {
background-color: cyan;
padding: 6px 6px 0 6px;
overflow: hidden;
position: relative;
border-bottom: 8px solid cyan; /* same color */
}
.icons,
.entries {
display: flex;
flex-direction: column;
}
.icons {
position: absolute;
top: 8px;
left: 8px;
}
.entries {
margin-left: 56px; /* icon width '38' + icon left '8' and right '8' distance */
}
.icon {
background-color: lightpink;
width: 38px;
height: 38px;
margin-bottom: 6px;
}
.entry {
font-size: 18px;
}
<div class="parent">
<div class="content">
<div class="icons">
<img class="icon">
<img class="icon">
<img class="icon">
<img class="icon">
</div>
<div class="entries">
<div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="entry">Quisque eleifend viverra risus, nec maximus nisi vestibulum eu</div>
<div class="entry">Mauris in libero lacus</div>
</div>
</div>
</div>