it-swarm.com.de

Scrollen einer flexbox mit überfülltem Inhalt

enter image description here

Hier ist der Code Ich verwende, um das obige Layout zu erreichen:

.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>

Ich habe den Code für das Styling weggelassen. Sie können alles in dem Stift sehen.


Das Obige funktioniert, aber wenn der Inhalt des Bereichs content überläuft, wird die ganze Seite gescrollt. Ich möchte nur den Inhaltsbereich selbst scrollen, also Ich habe overflow: auto zum content div .

Das Problem dabei ist jetzt, dass die Säulen selbst nicht über die Höhe ihrer Eltern hinausragen, sodass die Ränder dort ebenfalls abgeschnitten sind.

Hier ist der Stift mit dem Bildlaufproblem .

Wie kann ich festlegen, dass der Bereich content unabhängig gescrollt wird, ohne dass die untergeordneten Elemente über die Höhe des Felds content hinausgehen?

169
Joseph Silber

Ich habe mit Tab Atkins (Autor der flexbox spec)) darüber gesprochen, und das haben wir uns ausgedacht:

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;
}

Hier sind die Stifte:

  1. Kurze Spalten werden gestreckt .
  2. Längere Spalten laufen über und scrollen .

Der Grund dafür ist, dass align-items: stretch Seine Elemente nicht verkleinert, wenn sie eine intrinsische Höhe haben, was hier durch min-content Erreicht wird.

221
Joseph Silber

Ich habe dieses Problem nach langem Ausprobieren sehr elegant gelöst.

Schauen Sie sich meinen Blog-Beitrag an: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

Grundsätzlich müssen Sie, um eine flexbox cell scrollable) zu machen, alle ihre Eltern overflow: hidden;, oder es ignoriert einfach Ihre Überlaufeinstellungen und vergrößert stattdessen das übergeordnete Element.

72
geon

Arbeiten mit position:absolute; zusammen mit flex:

Positionieren Sie den Flexartikel mit position: relative. Dann füge drin noch ein <div> Element mit:

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

Dadurch wird das Element bis zu den Grenzen seines relativ positionierten übergeordneten Elements erweitert, kann jedoch nicht erweitert werden. Innerhalb, overflow: auto; funktioniert dann wie erwartet.

  • das in der Antwort enthaltene Code-Snippet - Klicken Sie auf enter image description here und dann auf Full Page nach dem Ausführen des Snippets [~ # ~] oder [~ # ~]
  • Klicken Sie auf hier für den CODEPEN
  • Das Ergebnis: enter image description here
.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>

Viel Glück...

28
Akash

Ein bisschen zu spät, aber das könnte helfen: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

Grundsätzlich müssen Sie html, body auf height: 100%; Setzen und Ihren gesamten Inhalt in einen <div class="wrap"> <!-- content --> </div> Verpacken.

CSS:

html, body {
  height: 100%;
}

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

Hat für mich gearbeitet. Ich hoffe es hilft

8
Doua Beri

Füge das hinzu:

align-items: flex-start;

zur Regel für .content {}. Das behebt es zumindest für mich in deinem Stift (sowohl in Firefox als auch in Chrome).

Standardmäßig, .content hat align-items: stretch, wodurch die Größe aller untergeordneten Elemente mit automatischer Größe an die eigene Größe angepasst wird, per http://dev.w3.org/csswg/css-flexbox/#algo-stretch . Im Gegensatz dazu ist der Wert flex-start lässt die Kinder ihre eigenen Höhen berechnen und sich an der Startkante ausrichten (und überlaufen und eine Bildlaufleiste auslösen).

5
dholbert