CODEWITHSUNDEEP
htmlcssscrollbar
Len White
Len White

Reputation: 992

Automatic sizing of Div Plus Scrollbar as Needed

This code functions close to what I am after:

<div id="outer" style="position:relative; background-color:lightgoldenrodyellow; margin:0px; top:0px; left:0px; width:300px; height:200px;">
    <span id="heading" style="background-color:palevioletred; display:block; text-align:center">
        List of Data
    </span>
    <div id="container" style="position:relative; overflow: auto;  background-color:aquamarine; height:160px;">
            <ul id="data">
                <li>Data Item 1</li>
                <li>Data Item 2. This data item requires more than 300 px of width and wraps as expected.</li>
                <li>Data Item 3</li>
                <li>Data Item 4</li>
                <li>Data Item 5</li>
                <li>Data Item 6</li>
                <li>Data Item 7</li>
                <li>Data Item 8</li>
                <li>Data Item 9</li>
                <li>Data Item 10. A vertical scrollbar has been added to the list div</li>
            </ul>
    </div>
</div>

Where I have difficulties is the height of the "container" div. It seems to inherit the width of the "outer" div just fine, but it's height is not restricted by that of the "outer" div. If I remove the height from the "container" div, it uses up as much height as is needed for the data, causing it to fill less than the space available when there is less data, and overflow beyond the height specified by the "outer" div when there is more data. What I want is for the "container" div to consume exactly the balance of the space available in the "outer" div as per the "outer" div style settings (after accounting for the height required by the "heading" span), adding a vertical scrollbar to the "container" div when needed? Note I am looking for a strictly html/css solution.This is how the code looks:

enter image description here

If I remove the height style from the "container div", this is how it looks:

enter image description here

I want the appearance not to change. I want the height of the "container" div to be controlled by the "outer" div height setting.

Upvotes: 0

Views: 38

Answers (1)

Syden
Syden

Reputation: 8625

I'd suggest flexbox for the #outer parent div. With this setup, you control #container's height from #outer's height value.

#outer {
  display: flex;
  flex-direction: column;
}


#outer {
  position: relative; 
  background-color: lightgoldenrodyellow; 
  margin: 0px; 
  top: 0px; 
  left: 0px; 
  width: 300px; 
  /* changes made */
  height: 195px;
  display: flex;
  flex-direction: column;
}

#heading {
  background-color:palevioletred; 
  display:block; 
  text-align:center;
}

#container {
  position: relative; 
  overflow: auto;  
  background-color:aquamarine; 
  /* height:160px; */
}
<div id="outer">
    <span id="heading">
        List of Data
    </span>
    <div id="container">
            <ul id="data">
                <li>Data Item 1</li>
                <li>Data Item 2. This data item requires more than 300 px of width and wraps as expected.</li>
                <li>Data Item 3</li>
                <li>Data Item 4</li>
                <li>Data Item 5</li>
                <li>Data Item 6</li>
                <li>Data Item 7</li>
                <li>Data Item 8</li>
                <li>Data Item 9</li>
                <li>Data Item 10. A vertical scrollbar has been added to the list div</li>
            </ul>
    </div>
</div>

Upvotes: 1

Related Questions