web-dev-qa-db-ja.com

コンテンツがあふれているフレックスボックスをスクロールする

enter image description here

これが のコードです。上記のレイアウトを実現するために使用しています。

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}
<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
    </div>
  </div>
</div>

スタイル設定に使用したコードを省略しました。あなたはそれをすべてペンで見ることができます。

上記は機能しますが、content領域の内容がオーバーフローすると、ページ全体がスクロールします。コンテンツ領域自体をスクロールさせたいだけなので、 content div にoverflow: autoを追加しました。

これの問題点は、柱自体が両親の高さを超えて伸びていないため、境界もそこで途切れていることです。

これはスクロールの問題を示しているペンです 。

子をcontentボックスの高さを超えて拡張しながら、content領域を個別にスクロールするように設定するにはどうすればよいですか？

csscss3layoutmultiple-columnsflexbox
164
Joseph Silber

これについて Tab Atkins （flexbox仕様の著者）と話しましたが、これが思いついたものです。

HTML：

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
    </div>
</div>

CSS：

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    min-height: min-content; /* needs vendor prefixes */
    display: flex;
}

ペンは次のとおりです。

  1. 短い列が引き伸ばされる 。
  2. 長い列のオーバーフローとスクロール 。

これが機能する理由は、align-items: stretchが固有の高さを持っている場合、min-contentによってアイテムが縮小されないためです。

221
Joseph Silber

多くの試行錯誤の末、この問題を非常にエレガントに解決しました。

私のブログ記事をチェックしてください。 http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

基本的には、flexboxセルをスクロール可能にするには、すべての親overflow: hidden;を作成する必要があります。そうしないと、オーバーフロー設定が無視され、親が大きくなります。

69
geon

flexと共にposition:absolute;を扱う：

フレックスアイテムをposition: relativeで配置します。それからその中に、別の<div>要素を追加します：

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

これは、要素をその相対位置の親の境界まで拡張しますが、それを拡張することはできません。内部では、overflow: auto;は期待通りに動作します。

.all-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
p {
  text-align: justify;
}
.bottom-0 {
  bottom: 0;
}
.overflow-auto {
  overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="p-5 w-100">
  <div class="row bg-dark m-0">
    <div class="col-sm-9 p-0 d-flex flex-wrap">
      <!-- LEFT-SIDE - ROW-1 -->
      <div class="row m-0 p-0">
        <!-- CARD 1 -->
        <div class="col-md-8 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/700x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 2 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
      </div>
      <div class="row m-0">
        <!-- CARD 3 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 4 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 5-->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3 p-0">
      <div class="bg-white m-2 p-2 position-absolute all-0 d-flex flex-column">
        <h4>Social Sidebar...</h4>
        <hr />
        <div class="d-flex overflow-auto">
          <p>
            Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream
            chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate
            bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva
        </div>
      </div>
    </div>
  </div>

がんばろう...

20
Akash

少し遅れますが、これは役に立ちます： http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

基本的にはhtml、bodyをheight: 100%;に置き、あなたのすべてのコンテンツを<div class="wrap"> <!-- content --> </div>にラップする必要があります。

CSS：

html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

私のために働きました。それが役に立てば幸い

8
Doua Beri

これを追加：

align-items: flex-start;

.content {}のルールへ。それは私のためにあなたのペンの中で、少なくとも（FirefoxとChromeの両方で）それを修正します。

デフォルトでは、.contentにはalign-items: stretchがあります。これは、 http://dev.w3.org/csswg/css-flexbox/に従って、すべての自動高さの子のサイズをそれ自身の高さに合わせます＃algo-stretch 対照的に、値flex-startは子供たちに彼ら自身の高さを計算させ、そして開始Edgeで自分自身を整列させます（そしてオーバーフローしてスクロールバーをトリガーします）。

5
dholbert