DIV extension by content

I currently have multiple divs nested within each other to display my content. The two inner divs should expand equally in height based on the text displayed inside them, but currently, the text just continues without a DIV.

From reading other user questions, it was recommended to use overflow: auto; but this resulted in scrollbars popping up where I really want the divs height to grow if needed. Currently the container DIVs have a fixed height, which I tried to change to the minimum height, but this results in it being much higher than the actual content, within which I think their 100% height is caused.

How can this be fixed?

.item
{
    width: 100%;
    height: 200px;
    background-color: #5ea8de;
    margin-top: 10px;
    border: 2px solid red;
}
.trigger
{
    width: 20%;
    height: 100%;
    background-color: #5ea8de;
    float: left;
    padding-left: 15px;
    border: 2px solid green;
}
.task
{
    width: 78%;
    height: 90%;
    margin-top: 7px;
    background-color: #1c3c5b;
    float: left;
    /*border: 1px solid;*/
    border: 2px solid blue;
}

      

        
        
        
      

    

HTML:

        foreach ($tasks as $task)
        {
            echo "<div class='item'>";

            $id = $task->Id;
            $type = $task->Type;
            $desc = $task->Description;
            $emits = $task->Emits;
            $events = $task->Tasks;

            echo "<div class='trigger'>
                    <div class='remove'><a href=''><img src='images/remove.png'></a></div>
                    <h4>Trigger: </h4></br>
                    $desc
                    <p>
                    <h4>Emits: </h4>";

                foreach ($emits as $emit)
                {
                    echo $emit . "</br>";
                }

                echo "</div>";
                echo "<div class='task'>";

                    foreach($events as $event)
                    {
                        $event_id = $event->Id;
                        $event_method = $event->TaskMethodName;
                        $event_params = $event->ParameterMapping;
                        $event_oneshot = $event->IsOneshot;
                        $event_enabled = $event->Enabled;

                        // Use the Method ID and retrieve Description for display (Make helper method for this???)
                        foreach ($methods as $method)
                        {
                            if ($method->Id == $event_method)
                            {
                                echo "<div class='remove'><a href=''><img src='images/remove.png'></a></div>";
                                echo "<h4>METHOD: " . $method->Description . "</h4>";
                            }
                        }

                        // Loop through the individual parameters and display both the key/value
                        foreach ($event_params as $key => $value)
                        {
                            echo "<label>" . $key . " | " . $value . "</label></br>";
                        }

                        echo "<hr>";
                    }

                echo "</div>"; //Task

            echo "</div>"; //Trigger
        }