web-dev-qa-db-ja.com

flexbox max-heightでの誤動作

私の問題はおそらく例で最もよく説明されています。次のjsfiddleはChromeで動作します：

http://jsfiddle.net/ga6g4/

ご覧のとおり、固定ヘッダーとスクロール可能なボディを備えたfixed-height flexboxがあります。これまでのところ良いです。ただし、 max-heightへの.lhsのコンテナー：

max-height: 100px;

http://jsfiddle.net/ga6g4/1/

壊れます。私のリストは今や高さゼロだと思うようです！これが何をしているのか、それを修正する方法は何ですか？

編集：私はこれがどのように振る舞うかについて、元の投稿で十分に説明していませんでした。基本的に、アウターは必要な最小の高さのみを使用する必要がありますが、最大（max-heightで定義）までしか使用できません。この時点で、コンテンツのスクロールを開始します。

cssflexbox
24
Barguast

OK、ここに誰かが興味を持っている場合に私が終わった解決策があります：

http://jsfiddle.net/vN65r/

基本的に、固定長ヘッダーに次を適用する必要がありました。

flex: 0 0 auto;

また、可変高さのスクロールボディには次のようになります。

flex: 0 1 auto;

私はそれが誰かを助けることを願っています

23
Barguast

両方を与えるmax-height:100px;およびheight:100%;動作するはずです。 http://jsfiddle.net/ga6g4/2/

4
vaskort

答えはflex-direction:columnを使用しているからだと思います。

あなたがflex-direction:rowへの切り替えを達成しようとしていることは、私にはまだ完全には明らかではありませんが、正しい効果があるようです。

JSfiddle Demo

[〜＃〜] css [〜＃〜]

.lhs {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 250px;
    max-height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
}

.panel-container {
    flex: 1;
    overflow: auto;
}
1
Paulie_D

バルガストの答えは良いものです。以下は、Bootstrapを使用した簡易バージョンです。

<div class="h-50 border border-danger">
    <div class="d-flex flex-column h-100">
        <header>Header</header>
        <div class="flex-shrink-1" style="overflow-y: auto;">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>
        <footer>Footer</footer>
    </div>
</div>

その秘trickは、overflow-y：autoと組み合わせたflex-shrink-1です。

0
ccleve