I created a Master Detail using horizontal two divs, but contents on the detail extends too far, how do I fix it so the contents don't extend out?

I'm not sure how to best explain this, I hope you understand what I'm saying. Perhaps if I show example code first then explain, it'll make a little more sense.

What I'm trying to do is have the master be a static width, while the the detail has a dynamic width that fills the remaining space. Which is what I've done with the code below.

Here is the the html below.

<div class='master'></div>
<div class='detail'></div>

This is the CSS below

* {
  height: 100%;
}

.master {
  width: 5em;
  float: left;
  background-color: red;
}

.detail {
  background-color: skyblue;
  width: 100%;
}

The problem I'm having is that if I put any content inside of the div with the class='detail', the contents extend past the left div with the class='master'. I understand that it might be because the width='100%' in my master class is causing that. So how do I keep the contents in the remaining width, not 100% of the width?