Mockupless

Nesting and overflow

Nesting

As explored in the Nesting article of the Core section, the parent-child relations between containers are relative. A child of one container can be a parent to others. This is true for flexbox containers too: children of a flex container can be flex parents themselves. This allows you to create complex layouts like the one below:

In the prototype above, the whole page is a full-screen flex container with three children—top nav bar, content and bottom tab bar:

<div style="display: flex;
            flex-direction: column;
            height: 100vh;">
  <!-- TOP NAV BAR -->
  <div>...</div>
  <!-- MAIN CONTENT -->
  <div style="flex: 1;">...</div>
  <!-- BOTTOM TAB BAR -->
  <div>...</div>
</div>

The top nav bar is itself a flex container with the default horizontal direction:



 










<div style="display: flex; flex-direction: column; height: 100vh;">
  <!-- TOP NAV BAR -->
  <div style="display: flex; align-items: center;">
    <button>Back</button>
    <div>Title</div>
    <button>Info</button>
  </div>
  <!-- MAIN CONTENT -->
  <div style="flex: 1;">...</div>
  <!-- BOTTOM TAB BAR -->
  <div>...</div>
</div>

The bottom toolbar is a flex parent to five tabs. The content area is also a flex parent populated with cards, that are flex containers themselves, and so on.

Flexbox allows you to organize items in one direction and to control their alignment. Nesting flex containers within flex containers—each with its own set of properties—allows you to create almost any layout you can imagine.

Overflow

The overflow property isn’t directly related to flexbox, but it is required for most layouts created with flex. overflow specifies the behavior of child containers when they don’t fit into the container.

By default, when a child container is larger than its parent, it remains visible.Wwith backgrounds applied, you can see how the child goes beyond the parent’s boundaries:


 



 





<div style="width: 80px;
            height: 80px;
            background-color: yellow;
            padding: 12px;">
  <div style="width: 40px;
              height: 160px;
              padding: 12px;
              background-color: blue;">
  </div>
</div>

Scroll

If you set the overflow property of the parent container to scroll, the content will stay within the boundaries of the parent container, and users will be able to scroll it:





 







<div style="width: 80px;
            height: 80px;
            background-color: yellow;
            padding: 12px;
            overflow: scroll;">
  <div style="width: 40px;
              height: 160px;
              padding: 12px;
              background-color: blue;">
  </div>
</div>

You are going to use overflow: scroll often in prototyping to create scrollable areas like in the two-column layout below:

The example above is created using a full-screen flex container with two children. overflow: scroll is added to both children, which enables two individual scrolls:

<div style="display: flex; height: 100vh;">
  <!-- LEFT COL -->
  <div style="width: 240px; overflow: scroll;">...</div>
  <!-- RIGHT COL -->
  <div style="flex: 1; overflow: scroll;">...</div>
</div>

Hidden

When the overflow property is set to hidden, the content of the container is cropped, and scrolling is not enabled:





 







<div style="width: 80px;
            height: 80px;
            background-color: yellow;
            padding: 12px;
            overflow: hidden;">
  <div style="width: 40px;
              height: 160px;
              padding: 12px;
              background-color: blue;">
  </div>
</div>

A common application of the hidden value is to crop an image so it stays within the boundaries of a container. Below, an image is placed in a flex container with rounded corners, and it is centered vertically and horizontally with the align-items and the justify-content properties:

<div style="width: 160px;
            height: 160px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;">
  <img src="http://website.com/photo.png">
</div>

Practice

Cards

Design a list of recent conversations:

  1. Create a new pen. In CSS, apply margin: 0 to the body tag.
  2. Start by designing a single card. Create a flex parent container with two children: one with a fixed width for a photo, and another with flex: 1 to take the rest of the space (apply a blue background color to make to effect visible):
<div style="display: flex;">
  <div style="width: 64px; height: 64px;"></div>
  <div style="flex: 1; background-color: #63B3ED;"></div>
</div>
  1. To add a round photo, turn the first child into a flex container, apply overflow: hidden and a big border radius, and center the content:


 
 
 
 



<div style="width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            border-radius: 9999px;
            overflow: hidden;">
  <img src="https://...jpg" style="width: 64px;">
</div>
  1. Add two child containers to the blue container. The first one is a flex container for a user name and a time stamp. The second one for a message:

 




 




<div style="flex: 1; background-color: #63B3ED;">
  <div style="display: flex">
    <div>Joe Cole</div>
    <div style="flex: 1"></div>
    <div>12:15 AM</div>
  </div>
  <div>
    Have they heard of Klimt anyway?
  </div>
</div>
  1. Apply proper alignments and text styles to the elements.
  2. Duplicate the card twice to create two more cards.
  3. To center the cards, wrap everything in a centered container:
<div style="display: flex; justify-content: center;">
  <div style="width: 100%; max-width: 500px; padding-top: 16px;">
    <!-- cards go here -->
  </div>
</div>

Don’t forget to collapse the containers that you don’t work with to make navigating the code easier.

Article

Create a low-fidelity design of an article page:

  1. Create a new pen. In CSS, apply margin: 0 to the body tag.
  2. In HTML, create a flex parent container. Make it full-screen using height: 100vh.
  3. Paste the result of the task in the flex: 1 article as the first child of the flex container. You can also use the code from prototype from the article.
  4. Create another child container with a blue background. Apply flex: 1 to it. You should be able to see in the Preview that this container takes all the available space:
  1. Since you need to center the article, you need to turn the blue container into a flex parent container using display: flex and center the content horizontally using justify-content: center.
  2. In the blue container, create a single child container that takes full width using width: 100%, but doesn’t expand beyond the specified width using max-width: 480px.
  3. Paste the result of the Text task in the Box model article into the centered container.
  4. Remove the background color from the blue container, and add overflow: scroll to it. This way the article area receives its own scroll, and the header always stays on top.

← Tailwind →