reset: prevent overflow on body, leave cross axis stretch

vwkd · Dec 6, 2023 · af81348 · af81348
1 parent e3d66c2
commit af81348
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ After resetting everything, this style sheet also includes modern default styles
 - Border box as sizing box, instead of content box
 - Flex Layout as default layout, instead of Flow Layout
 - `<html>` element default size is viewport size, instead of height being only content height
-- `<body>` element aligned to cross axis start to make children not stretch over full viewport
+- `<body>` element default size is viewport size
 
 
 

diff --git a/reset.css b/reset.css
@@ -31,18 +31,22 @@ head, meta, title, link, style, script {
     display: flex;
 }
 
-/* make root element size of viewport */
+/* make root element size of viewport
+
+note: inline-size: 100% is already default in Flex Layout !
+*/
 
 html {
     block-size: 100%;
-    /* already default in Flex Layout */
-    /* inline-size: 100%; */
 }
 
-/* disable cross axis stretch on first child of root element,
-   such that following children don't stretch over full viewport
+/* make entry point element full size
+
+note: cross axis stretch by default in Flex Layout, where cross axis is block direction by default in Flex Layout
+
+disable cross axis stretch on any child element, e.g. align-self: start;
 */
 
 body {
-    align-self: start;
-}
+    flex: 1;
+}