Скачать или смотреть How to Set min-height Equal to Content Height Using CSS Flexbox

Learn how to effectively use CSS Flexbox to set a `div` element's minimum height equal to its content without requiring JavaScript.
---
This video is based on the question https://stackoverflow.com/q/64390614/ asked by the user 'Tom T' ( https://stackoverflow.com/u/9084125/ ) and on the answer https://stackoverflow.com/a/64397096/ provided by the user 'Temani Afif' ( https://stackoverflow.com/u/8620333/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Set min-height equal to content height

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Set min-height Equal to Content Height Using CSS Flexbox

When designing responsive layouts, one common challenge developers face is setting the height of a div element so that it fits the content properly. You might want your div to have a minimum height and a maximum height, adapting to different screen sizes without any shrinking issues. This can be particularly tricky when you want to ensure that your div maintains a full screen height on larger displays but still respects the content size on smaller screens.

In this guide, we will explain how to achieve the desired effect using CSS Flexbox, without relying on JavaScript. Let’s break down the process into manageable sections.

The Problem at Hand

Goal:

Set the height of a div to 100vh (100% of the viewport height) on larger screens.

Limit the div height to a maximum of 800px, to prevent it from growing too large.

Ensure that on smaller screens, the div does not shrink below the height of its content.

Original CSS Structure:

Your initial CSS setup might look something like this:

[[See Video to Reveal this Text or Code Snippet]]

The Solution: Using Flexbox

By utilizing Flexbox, we can create a wrapper around the .hero div that allows us to effectively manage its height properties based on content size and screen dimensions.

Step 1: Add an Extra Wrapper

To start implementing Flexbox, create an additional wrapper class called .extra. Your HTML will change slightly to reflect this new structure:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update Your CSS

Next, modify your CSS to use Flexbox properties. Here’s how:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the CSS Properties:

display: flex;: This property enables Flexbox layout for the .extra container.

flex-direction: column;: This property ensures that the children of the flex container (.extra) are arranged in a column.

flex-basis: 100vh;: The .hero now takes the full height of the viewport initially.

max-height: 800px;: This prevents the .hero from growing beyond 800px.

box-sizing: border-box;: This property ensures that padding is included in the overall width and height, improving layout control.

Conclusion

By following these steps, you will have successfully created a responsive layout where the div adapts its height based on the content and the screen size without using any JavaScript. This method ensures that your content remains accessible and visually appealing across all devices.

If you found this guide helpful, feel free to share and implement these styles in your next web project. Happy coding!