Ext.Containerにscrollable:'vertical'したら長文の折り返しが画面外に行っちゃう罠

ちょっとした文章を表示するContainerをExt.Containerを継承して作ってみたら、折り返しがおかしいっていう。

例

Ext.define('MyContainer', {
    extend: 'Ext.Container',
    xtype: 'agreement',
    config: {
        fullscreen: true,
        styleHtmlContent: true,
        scrollable: true,
        html: 'あいうおえかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん',
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'ぶんしょ。'
            }
        ]
    }
});

こんな感じのを表示させると、AndroidのchromeとiOSのchrome, safariで折り返しがおかしくなる。PC用のchromeでも同じ現象。

scrollableを外すと期待した折り返しになるものの、今度はスクロールしない（当たり前）。で困ってググったら素敵な記事を発見。

SCSSを変更することで今回は解決。

.x-scroll-container {
  &>.x-inner {
    width: 100% !important;
  }
}

さて、もうひと頑張りしよう(´・ω・`)