Скачать или смотреть Understanding Why a div Cannot Contain Three 100vw Elements

Explore the reasons behind the visual issue of missing elements in a flexbox and learn effective solutions to display all required `divs` within a container.
---
This video is based on the question https://stackoverflow.com/q/76289613/ asked by the user 'ImEmo' ( https://stackoverflow.com/u/21926253/ ) and on the answer https://stackoverflow.com/a/76289669/ provided by the user 'oluroyleseyler' ( https://stackoverflow.com/u/21708057/ ) 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: Div cannot contains three 100vw elements

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.
---
Why Can't a <div> Contain Three 100vw Elements?

As website designers and developers, we often encounter issues while designing layouts that can seem puzzling at first. One common issue arises when trying to fit multiple div elements within a parent container, especially when each child is defined to be 100vw (100% of the viewport width).

In this post, we will explore a scenario where a developer wanted to create a <div class="chapters"> with three child <div class="chapter"> elements, each set to be 100vw wide. Despite the intention, only two of these elements were visible on the web page. Let's delve into what happened and how to resolve this problem.

The Problem Explained

The developer's initial code snippet was structured as follows:

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

What Went Wrong?

Viewport Width Considerations: Since each of the three child divs was set to 100vw, it meant one div would attempt to take up the entire width of the viewport. Therefore, when placed next to each other, they would exceed the viewport width, resulting in one being pushed out of the visible area.

Flexible Box Model: The use of flexbox (display: flex) alters the natural flow of elements. The default justify-content value (flex-start) results in the first element taking up space, while the latter elements are either hidden or overflow out of the parent scope.

Visual Representation

Actual Display: You will see two divs visible, while the first one is missing.

Web Inspector Findings: Inspecting the elements in the dev tools would show all three divs present in the DOM, but not rendered visibly.

The Solution

Adjusting the CSS

To solve the issue and ensure that all three divs are visible, the following adjustments are necessary:

Change Justification: Adjust justify-content: center; to justify-content: flex-start; or flex-end; to prevent the elements from being centered and moving out of the viewport width.

Here's the updated CSS code:

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

HTML Structure

This will work perfectly with the following HTML structure:

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

Summary of Key Changes

Changed Flex Justification: By applying justify-content: flex-start;, the first div does not overlap, thus making it visible alongside the others.

Min-width Consistency: Ensuring min-width constants is retained helps maintain the layout integrity.

Conclusion

In conclusion, understanding how flexbox works in conjunction with viewport units is essential for web developers and designers. This case exemplifies how layout issues can arise when elements are overly constrained by width settings. By modifying the justification properties, we can ensure that all intended elements remain visible and properly aligned.

Make sure to adjust your CSS properties accordingly when working with multiple full-width elements to maintain a clean and functional layout!