Limiting height of a element that was a core-list

[eSoares]

Is it possible to limit the height of a polymer element that was a core-list in its template? I tried to style it from various ways (when I try in the chrome dev tools it works great), but in the CSS at the source it causes the list to don't render.

The code that I'm using:

<polymer-element name="messages" attributes="messages" vertical layout>
    <template>
        <style>
        </style>

        <core-list data="{{messages}}" id="messages-list"  flex >
            <template>
                <div id="core_card" layout horizontal>
                    <core-label id="time">{{ model.time }}</core-label>
                    <div id="text" flex layout horizontal>
                        <div id="nick" style="color: red">{{ model.nick }}</div>
                        <div id="text_" flex>{{ model.text }}</div>
                    </div>
                </div>
            </template>
        </core-list>

    </template>
    <script>
    </script>
</polymer-element>

Usage:

<messages class="messages" fit></irc-messages>

[kevinpschaaf]

Can you be more specific about what you're having trouble sizing?

Given your example, <irc-messages> would be fit to its offsetParent, <core-list> will be flex'ed inside of it, and each core_card list item should be getting its size from the natural size of the text bound into the core-label and the other text div's.

When you say you want the height of the element containing the list limited, do you mean you want it to grow up to a certain size (based on the number of list items) but then max out at a certain size?

[eSoares]

I want to limit the <messages> element height on its usage. (The core-list could be bigger, but that would result in having scrolling.)

A example of usage following the above example, would be defining in CSS:

.messsages{
        height: 90%;
}