I've been experimenting with this, and I cannot get the height to behave in the same way as the width when I reduce
the size of the window/browser. (The code is inserted below. I have two "div" tags, with one nested inside the other.)
To be more explicit: When I reduce the width of the window/browser, the boxes for the "div" tags narrow as well,
to the point that the min-width is reached (which is expected). When I reduce the height of the window/browser,
the height of the boxes do not change at all.
Can anyone show me how I would get the same behavior for height as I do with width?
(Actually, the single "div" that remains after removing the inner "div" will not resize in the way that
would be expected either.)
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
.outer_div
{
/* height : 400px; */
min-height : 400px;
max-height : 700px;
min-width : 300px;
max-width : 900px;
margin : 20px;
border : solid;
}
.inner_div {
/* height: 220px; */
min-height: 220px;
max-height: 280px;
min-width: 400px;
max-width: 700px;
background-color: powderblue;
foreground-color: black;
border : solid;
margin : 20px;
/* clear : both; */
}
</style>
</head>
<body>
<div class='outer_div'>
<h2>Set the max-width of an element</h2>
<p>This div element has a height of 100px and a max-width of 500px:</p>
<div class='inner_div'>
:::------------------------------------this is some text : 1------------------------------:::<br/>
:::------------------------------------this is some text : 2------------------------------:::<br/>
:::------------------------------------this is some text : 3------------------------------:::<br/>
:::------------------------------------this is some text : 4------------------------------:::<br/>
:::------------------------------------this is some text : 5------------------------------:::<br/>
:::------------------------------------this is some text : 6------------------------------:::<br/>
:::------------------------------------this is some text : 7------------------------------:::<br/>
</div>
</div>
</body>
</html>