title: Making two adjacent elements behave like a single element
body: <p>Is it possible to make two adjacent elements behave like a single element, in a flexbox layout?</p>
  
  <p>Say this is my markup:</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
     &lt;div&gt;Flower&lt;/div&gt;
     &lt;div&gt;Tree&lt;/div&gt;
     &lt;div&gt;Bee&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what I want on desktop:</p>
  
  <pre><code>|        |           |
  |        |  Flower   |
  |  Tree  |___________|
  |        |           |
  |        |   Bee     |
  |        |           |
  </code></pre>
  
  <p>And on mobile:</p>
  
  <pre><code>| Flower |
  |________| 
  |        |
  |  Tree  |
  |________| 
  |        |
  |  Bee   |
  </code></pre>
  
  <p>So if I could combine Flower and Bee into a single flex column on desktop, it would be nice.</p>
  
  <p>I could probably use a float but I'm already using a flex grid.</p>
  
  <p>This is a page with variable content, I would want the content to grow vertically, and for a vertical scrollbar to appear on the page, if it goes beyond the viewport. </p>
  
  <p>There is no height set on any of the boxes.</p>
  
  <p>I am already using Flexbox for the grid and would not want to add any wrappers.</p>