Search code examples
csspolymerflexboxcustom-elementhtml-imports

Why doesn't Flexbox work correctly in not chrome browsers?

I'm writing a chat. When I wrote all DOM-modules in one HTML, it worked correctly in the Chrome, but DOM-modules didn't work in Edge. But then I moved all DOM-modules to another HTML file. Now it works in the Edge. But now Flexbox doesn't work in all browsers.

I've written a few samples:

All DOM-modules in one HTML: http://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview

DOM-module in another HTML: http://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview

I don't know why, but in the Chrome the second sample works correctly, although in the the full project it has problem with Flexbox. But the second sample has the same problem in Edge. See the second image.

The first sample in Edge (the DOM-module isn't loaded):

Everything in one place

The second sample in Edge ("flex-basis: 0" and "flex-grow: 1" don't work):

DOM-module in its own HTML file

The correct result in Chrome:

The correct result

index.html:

<!DOCTYPE html>
<html>

  <head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="http://polygit.org/components/polymer/polymer.html" rel="import">

    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <div class='main-block'>
      <div class='title'>
        <span>Title</span>
      </div>

      <my-module></my-module>

    </div>

  </body>

</html>

<dom-module id="my-module">
  <template>
      <div class='messages'>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
      </div>
      <div class='title'>
        <span>Bottom</span>
      </div>
  </template>

  <script>
    Polymer({
            is: "my-module" 
    });
  </script>
</dom-module>

style.css:

.main-block
{
  display: flex;
  flex-direction: column;

  border: solid 1px red;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.title
{
  background-color: red;
  min-height: 50px;
  height: 50px;
  margin: 10px;
  text-align: center;
}

my-module
{
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;

  border: solid 1px green;
  margin: 10px;
}

.messages 
{
  flex-grow: 1;

  border: solid 1px blue;
  margin: 10px;

  overflow-x: hidden;
  overflow-y: auto;
}

.message
{
  background-color: pink;
  min-height: 50px;
  height: 50px;
  margin: 10px;
}
Solution

  • To get it to work one should to add line "flex-basis: 0;" into .messages class.

    Polymer.js is nothing to do with. This is due to the different Flexbox behavior in different browsers.