Predix UI: Layout inside px-card

Hi!

I'd like to place 3 gauges in a row inside a px-card like seen on https://www.predix-ui.com/#/design/page-layout under the point Cards.

If I use the classes layout and layout_item the content won't be in a row (not only when using px-gauge, but also with text). If I then remove the class style-scope using the Google Chrome dev tools the desired result is gotten. I don't know why the class style-scope prevents me from using layout and layout_item.

And the Predix UI flexbox doesn't work at all inside a px-card altough it works perfectly fine if used in another place of my web app.

Where am I doing something wrong?

Here is the example code I am trying to use:

   <px-card header-text="Temperatures">
       <!-- 3 gauges in 3 columns -->
       <div class="layout">
         <div class="layout__item u-1/3">LI1</div>
         <div class="layout__item u-1/3">LI2</div>
         <div class="layout__item u-1/3">LI3</div>
       </div>
     </px-card>

Edit: Also, how do I limit the size of px-gauge? If use it it expands to such a size that it doesn't fit into the screen anymore (scrolling is needed).