scrollboxes in vbox flex

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox style="background-color:midnightblue; -moz-box-flex: 1;" flex="1">
<vbox orient="vertical" flex="1" style="background-color:skyblue; overflow:auto;" height="1">
<button label="Red"/>
<button label="Blue"/>
<button label="Green"/>
<button label="Yellow"/>
<button label="Orange"/>
<button label="Silver"/>
<button label="Lavender"/>
<button label="Gold"/>
<button label="Turquoise"/>
<button label="Peach"/>
<button label="Maroon"/>
<button label="Black"/>
<button label="Red"/>
<button label="Blue"/>
<button label="Green"/>
<button label="Yellow"/>
<button label="Orange"/>
<button label="Silver"/>
<button label="Lavender"/>
<button label="Gold"/>
<button label="Turquoise"/>
<button label="Peach"/>
<button label="Maroon"/>
<button label="Black"/>
</vbox>
<vbox orient="vertical" flex="1" style="background-color:steelblue; overflow:auto;" height="1">
<button label="Red"/>
<button label="Blue"/>
<button label="Green"/>
<button label="Yellow"/>
<button label="Orange"/>
<button label="Silver"/>
<button label="Lavender"/>
<button label="Gold"/>
<button label="Turquoise"/>
<button label="Peach"/>
<button label="Maroon"/>
<button label="Black"/>
</vbox>
</vbox>
</window> 

12:25 futpib How to split space evenly between two in a ? They seem to take up space propotional to their content height, not their flex
12:30 noida futpib: can you graphically show me what you want, as i dont understand. But I would think a combintation between XUL attributes of align and pack: https://developer.mozilla.org/en-US/docs/XUL_element_attributes
12:42 futpib noida: http://jsfiddle.net/rcq26oe5/ like this
12:49 noida futpib: So you want it two arrowscrollbox to take 50/50 height of a vbox?
12:50 noida futpib: Install this from AMO to allow Remote XUL: https://addons.mozilla.org/en-US/firefox/addon/remote-xul-manager/
12:50 noida futpib: Then let's recreate it here: http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul
12:54 noida Paste this code into the live xul editor it seems to work for me. I didn't edit anything: https://gist.github.com/Noitidart/249002a9bd0336fab25a
13:00 futpib try this https://gist.github.com/futpib/251f86fbb2244ba673cc
13:00 freonbot [ gist:251f86fbb2244ba673cc ] - gist.github.com
13:01 noida Yuck what did you do
13:01 futpib copypasted twice as more buttons into the upper scrollbox
13:02 noida Oh!
13:02 futpib flex seems to be ignored now
13:07 noida whats the flex-basis equivalent in xul?
13:08 noida koddsson: It's not working because you have no images linked at all. It's confusing me a lot as to why you would think it would work! Can you please explain to me I would like to see this work. I use github a lot this would be fun to use.
13:15 noida futpib: set height to both elements to be 1
13:15 futpib noida: awesome, thanks
13:16 noida We should post this on bugzilla though, maybe they can help out. Its very hackish huh?
13:16 futpib I would never have guessed for sure
13:18 noida a note though, if you empty one of the arrow boxes, the height is a little bit less than what you expect on the empty one
13:18 noida This is due to the toggling of visibility of the up and down arrow of the arrow boxes.
13:19 noida Like try putting just a couple buttons in the top box, its height is same as if it were empty.

SOLUTION:
Very hackish.
Set height of both elements to be 1px. cant use % unfortunately :(

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox style="background-color:midnightblue;" flex="1">
<arrowscrollbox orient="vertical" flex="1" style="background-color:skyblue;" height="1">
  <button label="Red"/>
  <button label="Blue"/>
  <button label="Green"/>
  <button label="Yellow"/>
  <button label="Orange"/>
  <button label="Silver"/>
  <button label="Lavender"/>
  <button label="Gold"/>
  <button label="Turquoise"/>
  <button label="Peach"/>
  <button label="Maroon"/>
  <button label="Black"/>
  <button label="Red"/>
  <button label="Blue"/>
  <button label="Green"/>
  <button label="Yellow"/>
  <button label="Orange"/>
  <button label="Silver"/>
  <button label="Lavender"/>
  <button label="Gold"/>
  <button label="Turquoise"/>
  <button label="Peach"/>
  <button label="Maroon"/>
  <button label="Black"/>
</arrowscrollbox>
<arrowscrollbox orient="vertical" flex="1" style="background-color:steelblue;" height="1">
  <button label="Red"/>
  <button label="Blue"/>
  <button label="Green"/>
  <button label="Yellow"/>
  <button label="Orange"/>
  <button label="Silver"/>
  <button label="Lavender"/>
  <button label="Gold"/>
  <button label="Turquoise"/>
  <button label="Peach"/>
  <button label="Maroon"/>
  <button label="Black"/>
</arrowscrollbox>
</vbox>
</window>