I'm trying to zoom children of a container to make it fit the container's height. The container is a flexbox item and may share the available space with other elements, i.e. a heading.

My problem is that I don't know how to examine the visible height of a flex item, minus the height of siblings:

I have created a codepen example here:

In the end, all cards should have the same height (so the first two cards' contents need to shrink even more).

I played around with scrollHeight, clientHeight, offsetHeight, getBoundingClientRect().height, but didn't succeed.

UPDATE:

Thanks to @Bergi, i found the solution. I have to manually calculate the max. height that is available to the .content element like so:

const contentHeight = parseFloat(sectionStyles.height) - content.offsetTop;

I somehow assumed that JavaScript would offer an automatically calculated property for this. I updated the CodePen, now it works very well.

I'm trying to zoom children of a container to make it fit the container's height. The container is a flexbox item and may share the available space with other elements, i.e. a heading.

My problem is that I don't know how to examine the visible height of a flex item, minus the height of siblings:

I have created a codepen example here:

https://codepen.io/jmuheim/pen/GgRBMbZ

In the end, all cards should have the same height (so the first two cards' contents need to shrink even more).

I played around with scrollHeight, clientHeight, offsetHeight, getBoundingClientRect().height, but didn't succeed.

UPDATE:

Thanks to @Bergi, i found the solution. I have to manually calculate the max. height that is available to the .content element like so:

const contentHeight = parseFloat(sectionStyles.height) - content.offsetTop;

I somehow assumed that JavaScript would offer an automatically calculated property for this. I updated the CodePen, now it works very well.

• javascript
• html
• css
• flexbox

Share Improve this question Follow edited Mar 26 at 10:15 Joshua Muheim asked Mar 25 at 19:44 Joshua MuheimJoshua Muheim 13.3k99 gold badges8686 silver badges165165 bronze badges 5

• 1 zoom is a strange way to solve this issue. Take a look at min-content. – Spectric Commented Mar 25 at 22:35
• @Spectric How is that going to help? – Bergi Commented Mar 26 at 0:26
• 3 Are you looking for slides.clientHeight - content.offsetTop? – Bergi Commented Mar 26 at 0:27
• 1 Please do not just post a link to your codepen but also include the code itself in your question. – Bergi Commented Mar 26 at 0:29
• Thank you @Bergi this did the trick! I updated the CodePen accordingly, now it works well. – Joshua Muheim Commented Mar 26 at 10:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

These modifications in the javascript file make the contents shrink inside the container.

1. Section's padding and border widths need to be considered to calculate the available height for the .content element within each section.

2. Subtract the height of the h1 element from the available height, along with its top and bottom margins.

3. The element.style.zoom is reset to 1, before each zoom adjustment to prevent zoom effects from previous adjustments.

4. scrollHeight checks the actual content height, including any content that overflows the visible area as opposed to clientHeight for determining if the content exceeds the available space.

      function adjustZoom() {
      const slides = document.querySelector(".slides");
       const sections = slides.querySelectorAll("section");
   
       sections.forEach((section) => {
        const content = section.querySelector(".content");
       const elements = content.children;
   
   
    const sectionStyles = getComputedStyle(section);
    const sectionPaddingTop = parseFloat(sectionStyles.paddingTop) || 0;
    const sectionPaddingBottom = parseFloat(sectionStyles.paddingBottom) || 0;
    const sectionBorderTop = parseFloat(sectionStyles.borderTopWidth) || 0;
    const sectionBorderBottom = parseFloat(sectionStyles.borderBottomWidth) || 0;
   
    let availableHeight = section.clientHeight - sectionPaddingTop - sectionPaddingBottom - sectionBorderTop - sectionBorderBottom;
   
   
    const heading = section.querySelector("h1");
    if (heading) {
      const headingStyles = getComputedStyle(heading);
      const headingMarginTop = parseFloat(headingStyles.marginTop) || 0;
      const headingMarginBottom = parseFloat(headingStyles.marginBottom) || 0;
      availableHeight -= heading.offsetHeight + headingMarginTop + headingMarginBottom;
    }
   
    let zoomLevel = 1;
   
   
    for (let element of elements) {
      element.style.zoom = 1;
    }
   
   
    while (content.scrollHeight > availableHeight) {
      zoomLevel -= 0.05;
      for (let element of elements) {
        element.style.zoom = zoomLevel;
      }
    }
      });
     }
   
     window.onload = adjustZoom;
    window.onresize = adjustZoom;