26

以下のような従来のメールのようなレイアウトを使用するアプリがあります。

新しい CSS3 フレックスボックス モデルを使用して構築しましたが、ユーザーがフォルダー ボックスに新しいアイテムを動的に追加する機能を追加するまで、見事に機能します。フォルダボックスにスペースが残っている限り、その下のタスクボックスに成長し始めないようにフレックスボックスが機能することを願っていました。残念ながら、これは私が見ているものではありません(Chrome 17)。

問題を示すJSFiddle hereを作成しました。[フォルダーの追加] リンクをクリックするだけで、新しい子を収容するのに十分なスペースが残っていても、フォルダー ボックスが大きくなります。

質問に。1 つが利用可能な高さの 3 分の 2 ( box-flex 2 ) を占め、もう 1 つが 3 分の 1 ( box-flex 1 )を占め、そのような方法でそれを行うように、flexbox を使用して 2 つの垂直に配置されたボックスを構築するにはどうすればよいですか?新しいコンテンツが最初のボックスに追加されたとき、スペースがなくなるまで拡張を開始しません。

4

3 に答える 3

16

それがブラウザのバグなのか、それとも実際にフレックス モデルがどのように機能するのか、はっきりとは言えません。それがどのように機能するかは、直感的ではないことに同意します。

オーバーフローを自動に設定して、リストを絶対位置のdivにラップすることで回避策を見つけました。これにより、フレックス ボックスは元の状態を維持し、コンテンツの変更に対してレイアウト全体が再計算された場合にのみ変更されます。

更新されたマークアップは次のとおりです。

<section id="folders">
   <div class="dynamicList">
   <h2>Folders</h2> 
   <ul>
      <li>Folder 1</li>
      <li>Folder 2</li>
   </ul> 
   <a href="#" id="add">Add Folder</a>
   </div>      
</section>

そして更新された CSS:

#left #tasks,
#left #folders {
  position: relative;
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

ここでデモを行うためにフィドルをフォークしました： http://jsfiddle.net/MUWhy/4/

アップデート：

見出しを固定したままにして、フォルダーとタスク リストのコンテンツのみをスクロールさせたい場合は、見出しと追加ボタンを #left div 内の固定高さのボックスに配置することを検討します。もう少しマークアップしていますが、それでもかなり単純です。JSFiddleで試したことはありませんが、それが最善の方法だと思います。

于 2012-02-12T19:21:32.190 に答える
14

私は多かれ少なかれ同じである私の他の質問からこの答えを得ました: https://stackoverflow.com/a/14964944/1604261

@LukeGT ソリューションの代わりに、それは回避策であり、効果を得るためのソリューションではありません。垂直スクロールを表示する要素に高さを適用できます。

したがって、垂直スクロールで最小の高さが必要な場合の最良の解決策は次のとおりです。

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

記事を表示するのに十分なスペースがない場合に完全な垂直スクロールのみが必要な場合:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px; /* or height:0px */
}

高さを設定しない場合 ( heightまたはmin-heightを使用)、垂直スクロールは設定されません。いずれの場合も、height: 0px;であっても。要素の計算された高さはゼロとは異なります。

-webkit プレフィックスを使用した私のソリューション: http://jsfiddle.net/ch7n6/4/

編集：

Firefox は完全な flexbox 仕様をサポートするようになったため、 -webkit-ベンダー プレフィックスを削除すると、すべてのブラウザーで動作します。

于 2013-02-19T18:54:37.197 に答える
4

ハックが少ないため、ジムのソリューションよりもこのソリューションを好みます-ページのどの部分のフレックスボックスでも機能します。Jim's は、ページの左上にあるボックスでのみ作業できます。

スクロールしたいフレックスボックスの部分を でラップすることでこれを解決しましたdiv.scrollbox。これの直接の子のdiv高さを 0 にして、その中に余分な要素を追加してもレイアウトの残りの部分に影響を与えないようにしました。また、その子が境界を超えた場合にスクロールバーが表示 overflow-yされるように設定しました。auto

.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
}
.scrollbox > * {
    height: 0;
}

これは、拡張可能なコンテンツが包含要素または包含要素内に配置されている場合にのみ機能することに注意してください。この例では、li要素は包含要素内に含まれているulため、機能します。

また、左上のフレックスボックスの 3 つのコンポーネントを適切に配置するためにいくつかの変更を加える必要がありましたが、これはアプリケーション固有のものでした。 

#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}

ここで上記の jsfiddle をフォークしました: http://jsfiddle.net/FfZFG/。

于 2012-12-13T07:18:20.747 に答える