Using the box-flex property for my layout isn't allowing me to achieve a scrollable flex box.
Here is the HTML:
<div class='dashboard'>
<div><button>Widget</button></div>
<div class="noboard"><button>Yammer</button>
<div class="yammerboard" >
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
</div>
</div>
<div><button>Notifications</button></div>
</div>
And here is the CSS:
.dashboard {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient: horizontal;
border: solid 2px black;
overflow-y:auto;
}
.noboard {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: vertical;
-moz-box-orient:vertical;
-webkit-box-orient: vertical;
overflow-y:auto;
}
.yammerboard {
display: box;
display: -webkit-box;
display: -moz-inline-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: vertical;
-moz-box-orient:vertical;
-webkit-box-orient: vertical;
overflow-y:scroll;
-moz-box-sizing: inherit;
box-flex: 0;
-ms-box-flex: 0;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-moz-box-lines:multiple;
}
For Firefox, I need the scrolling behavior with overflow:auto, while also preventing the flex box from expanding vertically. Unfortunately, setting box-flex: 0; has not resolved this issue.
If you have any suggestions on how to accomplish this, please let me know!