CODEWITHSUNDEEP
htmlcss
Dandry
Dandry

Reputation: 515

Forbid parent div width dynamic height from expanding to fit child content

I have a container which fits the whole viewport with nav, main and footer nodes. The main node needs to fill all of the available space of the page so its height is dynamic. Inside the main node I have a short hierarchy of nodes, where cats node may not fit the parent.

 <div class="container">
  <nav>
    <input />
  </nav>
  <main>
    <div class="scrollable">
       <div class="cats">
          <img src="https://placekitten.com/300/300" />
          <img src="https://placekitten.com/300/300" />
          <img src="https://placekitten.com/300/300" />
          <img src="https://placekitten.com/300/300" />
      </div>
    </div>
    <div class="cat">
      <img src="https://placekitten.com/280/280" />
    </div>
  </main>
  <footer>
    <button>
      Click me!
    </button>
  </footer>
</div>

I want to force the scrollable node to fill the main parent, but when its children overflow, show a vertical scrollbar. By any means I do not want the main node to resize to fit children, cause this results in content not fitting the viewport.

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column
}

main {
  flex: 1;
  display: flex;
}

.scrollable {
  flex: 1;
  display: flex;
  overflow-y: scroll;
}

.cats {
  flex: 1;
  display: grid;
  grid-auto-columns: 1fr;
  grid-gap: 10px;
}

This solution works... under Chrome. It does not under Firefox. I get the feeling that this chain of flex is not the way to go. I will be thankful for any hits how to make it more universal.

Here is a working fiddle: https://jsfiddle.net/ktguLn73/13/

Funny thing is, when I put overflow-y: scroll on the main node, it works in both Chrome and Firefox. But this is not the result I prefer.

Thank you for your help.

Upvotes: 0

Views: 264

Answers (1)

ypoulakas
ypoulakas

Reputation: 421

I remember reading an article with a similar problem where firefox wouldnt scroll with flex oveflow. Check out this page and see if it helps: https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

Read through the article and min-height: 0 on the container solved the issue for the layout in firefox.

Upvotes: 1

Related Questions