Auto-fit contents of a div to a hidden overflow div

Question

I've been trying to get the contents of a div (an image, a search bar, and three buttons all stacked on top of each other) to fit into a div that has a css styling of the overflow being hidden. The CSS for the div is as follows:

.jumbotron {
  overflow: hidden;
  display: block;
  padding: 0;
  margin-bottom: 0;
  background: #000000 url('../landing_background.jpg') no-repeat center center fixed;
  background-size: cover;
  position:relative;
}

Some javascript that could fix it would be:

    Parallax.prototype.translateBgImage = function() {
        var scrollPos = $(window).scrollTop();
        var pagecoverHeight = this.$element.height();
        if (this.$element.attr('data-pages-bg-image')) {
            var relativePos = this.$element.offset().top - scrollPos;

            // if element is in visible window's frame
            if (relativePos > -pagecoverHeight && relativePos <= $(window).height()) {
                var displacePerc = 100 - ($(window).height() - relativePos) / ($(window).height() + pagecoverHeight) * 100;
                this.$element.css({
                    'background-position': 'center ' + displacePerc + '%'
                });
            }
        }
    }

score 0 · Answer 1 · answered Aug 08 '17 at 19:21

Assuming you want the overflow: hidden div to contain all the content as is,

If you use the css property min-height (for initial height of div) and set height: auto; the size of the div should dynamically change height based on content. If you want the same for width use min-width and width: auto;

Assuming you want the overflow: hidden div to be a fixed size and adjust the size of the children to fit,

the following discussions may be helpful to you:

Drop down menu cut off by overflow hidden

Make children fit inside parent

Auto-fit contents of a div to a hidden overflow div

1 Answers1