Is there a way to shrink an element with set height?

问题

So I didn't really know what question to ask but hear me out. I was trying to make a div wrapper(it has a bisque background in the pictures) that would work like so:

One list overflowing

Both lists overflowing

Now, the layout above uses a fixed height to divide the wrapper using grid. So if I remove some items this is what I get.

Is there a way to shrink the wrapper to its content even though it has a fixed height? Or is it possible to archive the same result without setting the height?

Also, this is what using max-height instead looks like: One list overflowing

It works exactly how I want it with just a few items on the list. But I need it to show the scrollbar if overflown. So I'm looking for a combination of both.

And for those who wonder why did I use grid. Flex has the same issue plus some unwanted space distribution.

.wrapper {
  display: grid;
  grid-template-rows: repeat(max-content, 4);
  align-content: flex-start;
  margin: 0 auto;
  width: 80vh;
  height: 80vh;
  background-color: bisque;
  padding: 10px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
  margin: 10px 0;
}

.list {
  background-color: coral;
  padding: 10px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>
</body>

</html>

回答1:

You need to use max-height and grid-auto-rows instead height and grid-template-rows:

possible example

Note: that makes of even height each list (a bit closer to your requirement ) ,javascript might be needed to reset row heights at some points.

.wrapper {
  display: grid;
   /* new / update */grid-auto-rows: auto minmax(auto,1fr);/* makes a repeating pattern of 2 rows */
  align-content: flex-start;
  margin: 0 auto;
  width: 80vh;
   /* new / update*/max-height: 80vh;
  overflow:hidden;
  background-color: bisque;
  padding: 10px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
  margin: 10px 0;
}

.list {
  background-color: coral;
  padding: 10px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<div class="wrapper">
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <div class="header"></div>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>

// possible example with js

let grid = document.querySelector('.wrapper');
let gridRows = document.querySelectorAll('.wrapper > .list');
let rowTpl = '';

for (let i = 0; i < gridRows.length; i++) {
  let rowH = gridRows[i].offsetHeight;
  rowTpl += (" auto  minmax(auto," + rowH + "fr ) ");
  grid.setAttribute("style", "--rowTpl:" + rowTpl)
}

body {
  margin: 0;
}

.wrapper {
  display: grid;
  align-content: flex-start;
  margin: 0 auto;
  grid-template-rows: var(--rowTpl);
  width: 80vh;
  /* new / update*/
  max-height: 90vh;
  overflow: hidden;
  background-color: bisque;
  padding: 5px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
  margin: 5px 0;
}

.list {
  background-color: coral;
  padding: 5px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<div class="wrapper">
  <div class="header"></div>
  <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="header"></div>
  <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>

回答2:

So this is what I came up using js. I didn't intend to use it from the start. But since the only suggestion used it I also decided to try.

It's quite flexible although you need to set max height and the sum of paddings of the element in js.

function pxToVH(px, padding = 0) {
    return (px - padding) * (100 / document.documentElement.clientHeight);
 }

 const wrapper = document.querySelector('.wrapper');
 // If wrappers height is more than 80vh set the height to 80vh else set the height to auto
 wrapper.style.height = pxToVH(wrapper.scrollHeight, 20) > 80 ? '80vh' : 'auto';

.wrapper {
  display: grid;
  grid-template-rows: repeat(auto, 4);
  row-gap: 10px;

  background-color: bisque;

  width: 80vh;
  margin: 0 auto;
  padding: 10px;
}

.header {
  background-color: darkcyan;
  padding: 10px;
}

.list {
  background-color: coral;
  padding: 10px;
  overflow-y: auto;
}

.item {
  background-color: darkolivegreen;
  color: white;
  border: 1px solid gray;
}

<div class="wrapper">
   <div class="header"></div>
   <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
  </div>
  <div class="header"></div>
  <div class="list">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
  </div>
</div>

来源：https://stackoverflow.com/questions/64769810/is-there-a-way-to-shrink-an-element-with-set-height

标签

css

flexbox

grid