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;
}