States of a Windows 8 application - Build Windows 8 Apps with HTML5 and JavaScript - page 192

FIGURE 8-9 The SnapMe application in filled mode.
As you can see, all blocks within the flexible container are listed horizontally and fit nicely into the
available space. If you display the application in full-screen landscape mode, the container will extend
for the entire width and excess space is allotted at the end of the row. This is due to the -ms-flex-align
setting of start .
Figure 8-10, instead, provides a view of the application when snapped to the left edge. The
available space is now too small to fit multiple blocks on the same row. The result is that elements
flow vertically. Should you have an element too large to fit the 320 pixel size, then you have two
options: accept the excess content to be cropped or make the flexible container scrollable. You can do
that by adding the following style to the flexible container.
.flexible-container {
overflow: scroll;
...
}
Note that this setting was already included in the code you added to the default.css file earlier in
the exercise.