Can't change width of flyout

I have a flyout has id "productFlyout". I tried to set its background color and width. It has red color but the width doesn't change. It seems that Metro doesn't allow width too big.

JS file:

productFlyout.winControl.show(dummyDOM, "bottom", "center");

CSS file:

#productFlyout {
   background: red;
    width: 1000px;
}


#productFlyout .win-flyout {
    width: 1000px;
    background: red;
}