documentation layout broken when compiling Bootstrap with Flexbox support

Created by: bassjobsen

On pages of the documentation the .bd-content columns is too wide due to the div.highlight takes full width and did not get overflow-x: scroll. The page look like that shown in the figure shown beneath (on both FF and chrome):

According to http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text fixing is possible with:

I found that the following code fixes the issue for both FF and Chrome:

.bd-content {
   min-width: 0px;
 }

For other browsers the following code is possible needed:

.bd-content {
  flex-shrink: 1;
  min-width: 0px;
}

.bd-sidebar {
  flex-grow: 1;
}

Or even:

.bd-content {
  flex-shrink: 1;
  flex-order: 1;
  min-width: 0px;
}

.bd-sidebar {
  flex-order: 2; 
  flex-grow: 1;
}