How can I stretch a div column vertically to fit its container?

Question

All content is dynamic.

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
 
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:auto; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: both
}

<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>

I want the white column to stretch vertically to pair the height of the pink column (reach the bottom yellow border). I prefer not to use absolute or relative displays.

Here is the solution with display:relative and display:absolute. It works, but gives me other problems in a more complex structure.

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    position:relative;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
    position:absolute;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: both
}

<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>

Answer 1

Set the element to be stretched and all of its parent containers to height:100%;.

For example,

#element_to_be_stretched, html, body {height: 100%}

Answer 2

See this:

html, body { height: 100% }

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    height: 100%;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: none
}

<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>
html, body { height: 100% }

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    height: 100%;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: none
}

(I changed your clear DIV and added height: 100% to surrounding elements.)

Answer 3

You don't want to use absolute/relative? What do you want to use?

Here's a CSS only fix, otherwise background image http://unnaturalcode.blogspot.com/2012/08/css-recipe-for-making-elements-fill.html