position overlaying div within another div

Question

I've got some 'person' divs in a 'main' div. On 'person':hover I show an overlaying div. I want it appear only within the 'main' div, not go beyond 'main's boundaries. This way:

When cursor over AGCH div

When cursor is over JALO div

I want Jack London's right border aligned with main's right border.

The complete example here: https://jsfiddle.net/yjdrnk9o/1/

HTML

 <div id="main">
    <div class="person">
        <span  class="short-name">WISH</span>
        <div class="more">
            <span>William</span>
            <span>Shakespeare</span>            
        </div>
    </div>

    <div class="person">
        <span  class="short-name">AGCH</span>
        <div class="more">
            <span>Agatha</span>
            <span>Christie</span>           
        </div>
    </div>

    <div class="person">
        <span  class="short-name">JALO</span>
        <div  class="more">
            <span>Jack</span>
            <span>London</span>         
        </div>
    </div>

</div>

CSS

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}

Thank you

Answer 1

Like this? https://jsfiddle.net/yjdrnk9o/3/

I added a class to your html to distinguish the last .person from the others and then said that the .more child of the .person.right element should be aligned to the right.

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}

.person:last-of-type .more {
    right: 0;
}

<div id="main">
 <div class="person">
  <span  class="short-name">WISH</span>
  <div  style="display:none;" class="more">
   <span>William</span>
   <span>Shakespeare</span>   
  </div>
 </div>

    <div class="person">
  <span  class="short-name">AGCH</span>
  <div  style="display:none;" class="more">
   <span>Agatha</span>
   <span>Christie</span>   
  </div>
 </div>

    <div class="person on-right">
  <span  class="short-name">JALO</span>
  <div  style="display:none;" class="more">
   <span>Jack</span>
   <span>London</span>   
  </div>
 </div>
    
</div>

Answer 2

use :last-of-type or :nth-of-type(3)

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute; 
    white-space: nowrap;
    background-color:gray;
}

.person:last-of-type .more{
    right: 0;
}

<div id="main">
 <div class="person">
  <span  class="short-name">WISH</span>
  <div  style="display:none;" class="more">
   <span>William</span>
   <span>Shakespeare</span>   
  </div>
 </div>

    <div class="person">
  <span  class="short-name">AGCH</span>
  <div  style="display:none;" class="more">
   <span>Agatha</span>
   <span>Christie</span>   
  </div>
 </div>

    <div class="person">
  <span  class="short-name">JALO</span>
  <div  style="display:none;" class="more">
   <span>Jack</span>
   <span>London</span>   
  </div>
 </div>
    
</div>