I just discovered the use of min-height, max-height, min-width, and max-width, and thought that I would share all these wonderful uses with you!
What do they do
min-height creates a minimum height for your div or content area. As you can see in the examples below, if the text stretches the box less than 100px high, the box will automatically be 100px, however as soon as you add more content, the height of the box stretches with the content.
In order to achieve this, you can use the following codes, and tweak them as necessary.
max-height works in the opposite direction to min-height. Instead of creating a minimum height the div or content area must be, this code creates a maximum. As you can see in the examples below, if the code is less than the maximum height of 150px, then the div wraps around it, however if the content passes 150px high, it gets cut off.
In order to achieve this effect, use the following code.
I know that this looks messy, as the text spills out of the div, and looks messy. I will provide a solution later on in the article.
min-width creates a minimum width, hopefully you understand what that means by now. The examples below show a box that is less than the minimum width, and one that exceeds the minimum width.
Here are the codes you can use to accomplish this.
They stretch across the whole page as they haven’t been given a width to stop stretching at. In order to avoid this, we can include a max-height into the code, which shall be explained later in this article.
max-width creates a maximum width that a div can stretch too. As the examples below show us, if the code doesn’t reach the maximum width, then it’s all ok, however if the code does reach the maximum width, the content will be bumped onto the next line.
Here are the codes you can use.
These are the very basic structures and uses of the code, and some of them, like the max-height or the min-width have problems if they are used alone. Below are some combinations that you can use to avoid these problems.
Combos to Solve Problems
While using a max-height, any content that exceeds the maximum height spills out of the div. In order to stop the text from spilling out of the div, as it looks really messy, you can pair the max-height with the overflow:auto; function, which will create a scroller for the text to use when it exceeds the limit, as shown below.
Here is the code that includes the overflow:auto;
Another problem we faced earlier is the min-height problem. This is where you have created a minimum height the content must be, however since there is no limit to the width, the div will stretch across the whole page. In order to avoid this problem, simply use a combination of the min-height and max-height problem, as shown below. All the lines in the first box contain less than 200px, as I have spaced them using the <br> code.
The code for this is: