Update the Flickable and ScrollView docs...

...to include mention that the default is for the viewport dimensions to
be calculated automatically and add properties and and an example to the
Flickable docs

docs/builtin_elements.md

@@ -576,22 +576,43 @@ FIXME: write docs
 
 ## `Flickable`
 
-FIXME: write docs
-
 The `Flickable` is a lower-level item that is the base for scrollable
 elements, such as the ScrollView widget. When the viewport-width or the
 viewport-height is greater than the parent width or parent height
 respectively the element becomes scrollable although the `Flickable`
-does not create a scrollbar. When using a for loop to populate the
+does not create a scrollbar. The viewport-width and viewport-height are
-elements, the viewport-width and viewport-height are not automatically
+calculated automatically except for when using a for loop to populate
-calculated and scrolling will not work properly until the viewport-width
+the elements. In that case they are not automatically calculated. The
-or viewport-height are set manually for the horizontal and vertical
+ability to automatically calculate the viewport-width and
-scrolling respectively. The ability to automatically calculate the
+viewport-height when using for loops may be added in the future and is
-viewport-width and viewport-height when using for loops may be added in
+tracked in issue #407.
-the future and is tracked in issue #407.
-
 When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
 
+### Properties
+
+* **`viewport-height`** (*length*): The total scrollable height
+* **`viewport-width`** (*length*): The total scrollable width
+* **`viewport-x: native_output`** (*length*): 
+* **`viewport-y: native_output`** (*length*): 
+* **`interactive: true (*bool*):
+
+### Example
+
+```60
+Example := Window {
+    width: 270px;
+    height: 100px;
+
+    Flickable {
+        viewport-height: 300px;
+        Text {
+            y: 150px;
+            text: "This is some text that you have to scroll to see";
+        }
+    }
+}
+```
+
 ## `TextInput`
 
 The `TextInput` is a lower-level item that shows text and allows entering text.
@@ -824,4 +845,4 @@ depends on the role and the platform.
 * **`apply`**: This is the role of the "Apply" button
 * **`reset`**: This is the role of the "Reset" button
 * **`help`**: This is the role of the  "Help" button
-* **`action`**: This is the role of any other button that perform another action.
+* **`action`**: This is the role of any other button that perform another action.

docs/widgets.md

@@ -225,15 +225,14 @@ Example := Window {
 
 ## `ScrollView`
 
-A Scrollview contains a viewport that is bigger than the view and can be scrolled.
+A Scrollview contains a viewport that is bigger than the view and can be
-It has scrollbar to interact with.
+scrolled. It has scrollbar to interact with. The viewport-width and
-When using a for loop to populate the elements, the viewport-width and
+viewport-height are calculated automatically to create a scollable view
-viewport-height are not automatically calculated and scrolling will not
+except for when using a for loop to populate the elements. In that case
-work properly until the viewport-width or viewport-height are set
+the viewport-width and viewport-height are not calculated automatically
-manually for the horizontal and vertical scrolling respectively. 
+and must be set manually for scrolling to work. The ability to
-The ability to automatically calculate the viewport-width and
+automatically calculate the viewport-width and viewport-height when
-viewport-height when using for loops may be added in the future and is 
+using for loops may be added in the future and is tracked in issue #407.
-tracked in issue #407.
 
 ### Properties