3

My code below works fine in Chrome and Safari but does not seem to work in IE Edge and Firefox (Not in IE11 either but that's out of the question).

If I don't use subheader and nested-content as in this post then it renders it properly in those browsers. But this dictates how my components need to be structure and I was hoping to avoid that.

Will this way of doing it work by doing some more things for Firefox and Edge or do I need to rethink the nesting?

Edit: My case is this: at the container level I know the max height (it is dynamically calculated and set in a "Popover" component). But I cannot set any specific max-height in the children since they are just the "content" of the Popover. And I don't want the entire .container to overflow but instead only the list nested-content.

.container {
  display: flex;
  max-height: 140px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: lightgray;
}
.subheader {
  background: lightblue;
}
.content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;  
}
.content > div {
  flex: 0 1 auto;
}
.nested-content {
  overflow: auto;
}
<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.</div>
  <div class="content">
    <div class="subheader">Subheader without specific height.</div>
    <div class="nested-content">
      <div>Item no 1 in long list</div>
      <div>Item no 2 in long list</div>
      <div>Item no 3 in long list</div>
      <div>Item no 4 in long list</div>
      <div>Item no 5 in long list</div>
      <div>Item no 6 in long list</div>
      <div>Item no 7 in long list</div>
      <div>Item no 8 in long list</div>
      <div>Item no 9 in long list</div>
      <div>Item no 10 in long list</div>
      <div>Item no 11 in long list</div>
      <div>Item no 12 in long list</div>
    </div>
  </div>
</div>
Community
  • 1
  • 1
Cotten
  • 8,787
  • 17
  • 61
  • 98

2 Answers2

1

see if this plunker is the correct solution for your case https://plnkr.co/edit/12N6yofXXeUoTrG6tUuZ?p=preview

.container {
  display: flex;
  max-height: 140px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: lightgray;
}
.subheader {
  background: lightblue;
}

.content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;  
  overflow:auto;
}
.content > div {
  flex: 0 1 auto;
}
.nested-content {
  overflow: auto;

}
Tawfiq abu Halawah
  • 1,214
  • 1
  • 12
  • 20
  • Thanks, but that only overflows the entire container. I only want overflowing on the list of items (`nested-content`) – Cotten May 24 '16 at 08:58
  • then you need to set a max height for its parent – Tawfiq abu Halawah May 24 '16 at 09:01
  • Sorry, good point! The question is missing an important requirement, but I've added it now. – Cotten May 24 '16 at 09:11
  • I edited my answer please check the plunker above may it give you an idea to solve the problem – Tawfiq abu Halawah May 24 '16 at 09:25
  • 4
    I don't want to be dependant on fixed heights and calc in the content. But actually, your first answer led me to the missing piece. On Firefox and Edge, I needed to put `overflow: auto` on the `.content` **as well**. When doing that, it works! If you change your answer to that i'll accept it :) – Cotten May 26 '16 at 08:50
0

It seems like it's a bug in Firefox and, evidently, in Edge as well.

Please, refer to the solution already exposed on Stackoverflow: "firefox overflow-y not working with nested flexbox"

caruso_g
  • 404
  • 6
  • 16