title: Flexbox two rows same width with overflow
body: <p>I'm trying to create a "simple" information bar that should be displayed inline.</p>
  
  <p>The bar consist of two divs, where the first contains all the required info (and is always visible) and the second shows information messages when they apply.
  I have created a pen to demonstrate <a href="http://codepen.io/gkaran/pen/PqREYG" rel="nofollow">here</a>.</p>
  
  <p>My problem is that the content of the upper div is not always the same width and in some cases it overflows (which is a valid behavior based on my requirements since I always want it to be in one line). Thus when the screen gets shrinked enough the upper div overflows but the below keeps a width same as the screen width and does not follow the upper div's width.</p>
  
  <p>What I want to achieve is make the below div have the same width as the upper even when the upper one overflows. Any ideas anyone?</p>
  
  <p>Adding code here as well for reference:</p>
  
  <p><strong><em>HTML:</em></strong></p>
  
  <pre><code>&lt;h2&gt; Shrink me to see than warning div is not the same width as the other one&lt;/h2&gt;
  
  &lt;div id="TaskTimeBar"&gt;
    &lt;div id='main-wrapper'&gt;
      &lt;div class="task-time-bar-content"&gt;
        &lt;div id="time-cell"&gt;
          &lt;div class='time-container'&gt;
            &lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;21:12
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="active-task-bar-main-content"&gt;
          &lt;div&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt; &lt;a href="/show?table=TASK&amp;amp;key=28125"&gt;#28125&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;i class="fa fa-info"&gt;&lt;/i&gt; This can be a long text...&lt;/div&gt;
          &lt;div&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; &lt;a href="/show?table=Customer&amp;amp;key=1"&gt;Yo mama&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="active-task-bar-buttons"&gt;
          &lt;div class="active-bar-button-wrapper"&gt;
            &lt;button&gt;Stop&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="active-bar-button-wrapper"&gt;
            &lt;button&gt;Switch To #28192&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="active-task-bar-information"&gt;This is an information message&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>CSS:</em></strong></p>
  
  <pre><code>#TaskTimeBar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #main-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .task-time-bar-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 5px;
  }
  #time-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: bold;
    font-size: 22px;
  }
  .time-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .time-container i {
    padding-right: 5px;
  }
  #active-task-bar-main-content {
    padding: 0 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
  }
  #active-task-bar-main-content div {
    padding: 0 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
  }
  #active-task-bar-buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 10px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
  }
  .active-bar-button-wrapper {
    line-height: 28px;
    margin-right: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .active-task-bar-information {
    background-color: #ffa500;
    color: #f3ebf8;
    border: thin solid #808080;
    border-top: none;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  </code></pre>
  
  <hr>
  
  <p><strong><em>Edit:</em></strong></p>
  
  <p>Let me explain a little bit more based on the div's ids as asked in the comments.</p>
  
  <p>I hava a <code>#TaskTimeBar</code> that contains two divs inside, <code>#main-wrapper</code> and <code>#active-task-bar-information</code>. Requirements are as follows:</p>
  
  <ul>
  <li><code>#main-wrapper</code> should always be in one line</li>
  <li><code>#active-task-bar-information</code> should always have the same width as <code>#main-wrapper</code> and be underneath it.</li>
  </ul>
  
  <p>The problem is that when the screen becomes small the contents of <code>#main-wrapper</code> overflow and exceed the screen width but <code>#active-task-bar-information</code> does not follow. If you play around with the window width in the linked pen you will see the effect.</p>