How to clip floated content

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>