<!doctype html>

 <style>
    html {
        font: 16px Times;
    }

    .content {
        padding: 5px;
    }

    #region2 .content { /*fragmented content only has padding-top in the 1st fragment container*/
        padding-top: 0px;
    }
    
    .first-box {
        border: 1px solid blue;
    }

    #region2 .first-box {
        border-top-width: 0px;
    }
    
    .second-box {
        margin:40px;
        border: 1px solid green;
        overflow:hidden;
    }

    #region2 .second-box {
        margin-top: 0px;
        border-top-width: 0px;
    }

    #region2 .second-box > p:first-child {
        margin-top: 0px
    }
    
    #region1, #region2, #region3 {
        border: 1px solid black;
    }

    #region1 {
        width: 200px;
        height: 100px;
        overflow-y: hidden;
    }
    
    #region2 {
        width: 300px;
        height: 180px;
    }
    
    #region3 {
        width: 120px;
        height: 120px;
    }
</style>

<body>
<p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself independently in each region.</p>

<div id="container">
    <div id="region1">
        <div class="content">
            <div class="first-box">
                <div class="second-box">
                    <div style="width:500px">Clipped line of text that should not be visible.</div>
                    <p>These lines will</p>
                </div>
            </div>
        </div>
    </div>
    <div id="region2">
        <div class="content">
            <div class="first-box">
                <div class="second-box">
                    <p>not spill out of the regions. These lines will not spill out of the regions.
                    These lines will not spill out of the regions. </p>
                    <div style="width:500px">Clipped line of text that should not be visible.</div>
                </div>
            </div>
        </div>
    </div>
    <div id="region3"></div>
</div>