docs

book/src/guides/layout.md

@@ -6,9 +6,11 @@ Learn how the layout attributes work.
 - [`min_width & min_height`](#min_width--min_height)
 - [`max_width & max_height`](#max_width--max_height)
 - [`Size units`](#size_units)
+  - [`auto`](#auto)
   - [`Logical pixels`](#logical-pixels)
   - [`Percentages`](#percentages)
   - [`calc()`](#calc)
+  - [`fill`](#fill)
 - [`direction`](#direction)
 - [`padding`](#padding)
 - [`margin`](#margin)
@@ -81,6 +83,23 @@ fn app(cx: Scope) -> Element {
 
 ### Size Units
 
+#### Auto
+Will use it's inner children as size, so in this case, the `rect` width will be defined bu the width of `label`:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "auto",
+            height: "33",
+            label {
+                "hello!"
+            }
+        }
+    )
+}
+```
+
 #### Logical pixels
 
 ```rust, no_run
@@ -108,6 +127,28 @@ fn app(cx: Scope) -> Element {
 }
 ```
 
+#### fill
+Use the remaining available space from the parent area:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "100%",
+            height: "100%",
+            rect {
+                height: "200",
+                width: "100%",
+            }
+            rect {
+                height: "fill", // This is the same as calc(100% - 200)
+                width: "100%",
+            }
+        }
+    )
+}
+```
+
 #### `calc()`
 
 For more complex logic you can use the `calc()` function.