CODEWITHSUNDEEP
csssassflexboxoverflow
Raven
Raven

Reputation: 1523

simple flexbox grid overflow fit to row height

I have a very simple grid using flexbox where I want to display multi-line data in a scrollable box. I might be missing a trivial property but the row height doesn't appear to adjust itself properly to the height of it's content.

An example: https://plnkr.co/edit/rCXfvd4Vsh8RgoFja89A?p=preview

.grid {
  display: flex;
  flex-flow: column;
  max-height: 400px;
  overflow-y: auto;
}

.grid .header {
  font-weight: 700;
  margin-bottom: 6px;
  border-bottom: 3px solid black;
}

.grid .row {
  flex: 1;
  display: flex;
  flex-flow: row;
}

.grid .row:nth-child(even) {
  background: #CCC;
}

.grid .col-1 {
  flex: 0 0 60px;
}

.grid .col-2 {
  flex: 1 0 200px;
  white-space: pre;
}
<h1>Flexbox grid</h1>

<h3>Overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

<h3>No overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

enter image description here

To keep everything simple I my columns are fixed size and all the data I want to display is loaded into the grid (instead of using a virtual grid). Is there a way to fix my example so that the rows adjust itself to the content?

EDIT: SOLVED!

As user @bhv pointed out I should have disabled shrink on .row by applying flex: 1 0 auto instead of flex+:1 (1 auto).

.grid {
  display: flex;
  flex-flow: column;
  max-height: 400px;
  overflow-y: auto;
}

.grid .header {
  font-weight: 700;
  margin-bottom: 6px;
  border-bottom: 3px solid black;
}

.grid .row {
  flex: 1;
  display: flex;
  flex-flow: row;
  flex-shrink: 0;
}

.grid .row:nth-child(even) {
  background: #CCC;
}

.grid .col-1 {
  flex: 0 0 60px;
}

.grid .col-2 {
  flex: 1 0 200px;
  white-space: pre;
}
<h1>Flexbox grid</h1>

<h3>Overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

<h3>No overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

https://plnkr.co/edit/jIoaME?p=preview

Upvotes: 2

Views: 174

Answers (1)

Asons
Asons

Reputation: 87191

Since the total height of your items is higher than their parents max-height, and since the flex-shrink defaults to 1, they will shrink as much as possible to fit.

So by simply change flex-shrink to 0 will prevent that.

Also the flex: 1 cause another change of the defaults, where the flex-basis is set to 0, which will make the items share the space left equally, instead of the default auto, which takes their content into account before the remaining space is calculated.

In your case though, where the parent has no height (and flex-direction: column), flex: 1 has no effect and can be deleted.

Upvotes: 3

Related Questions