After being closed: This questioned was closed and the linked answer does add the missing piece to the solution. I think the question I linked to and the one linked in the close, together, answer my question.
Also to apply the answer from the link, the min-height needs to be set to 0 on the .prnt and not .scrl_can because, one reason at least, the flex direction of .scrl_can is in the width direction. I was misunderstanding the result and thought .scrl_can was overflowing but it was really .prnt. Setting min-height:0 on .prnt solved the issue because its flex direction is in the height direction.
Thanks for the help; it was interesting to learn a few things not in my CSS book.
I am almost certainly not understanding something fundamental concerning flexbox. In these two snippets, all code is the same except the height of the .content class division. I'm trying to determine if I am doing something wrong or if flexbox calculates heights in such a manner that the .scrl_can class division cannot be determined such that it can be confined within its parent and its overflow content hidden.
In the first snippet, the height of .scrl_can is 100% and the height of .content is such that it cannot overflow; and all looks well. In the second snippet, the height of .content is increased to overflow .scrl_can and instead of being hidden, the height of .scrl_can increases to contain it.
Would you please explain? It seems that all the heights could be determined based off of 100vh at the start, rather than being based upon the content within .scrl_can; but it doesn't appear to be working that way.
I've read this SO answer and it makes sense; but, in this scenario, the only height not specified is on the .prnt class which is in a flexbox with flex-flow: column nowrap with the .foot class, which has a fixed height.
So, html and body are 100vh; .flex_can is 100%. Then, .prnt is flex: 1 1 and its sibling is flex: 0 0 5.0rem. I tried a flex-basis of 100vh and 100% on .prnt but that didn't work.
In addition, if .scrl_can is set to height:90% when .content doesn't overflow, the height appears shorter on the screen. So, it appears that the height of .prnt is being calculated.
Thank you for any guidance you may be able to provide.
I apologize for the edits, I just noiticed that what worked in making the snippet, doesn't work here unless viewed full-page and that required increasing the height.
Also: If set the height of .prnt to height: calc(100vh - 5.0rem - 4.0rem - 4.0rem) it works; but that is what flex: 1 1 is supposed to do. Also, if leave flex: 1 1 and change the height of .flex_can to calc(100vh - 5.0rem - 4.0rem) it won't work.
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 2.0rem 0;
height: 100vh;
border: 0.5rem solid rgb(170,170,170);
}
div {
margin: 0;
padding: 0;
}
.flex_can {
display: flex;
flex-flow: column nowrap;
width: 50.0rem;
height: 100%;
margin: 0 auto;
}
.prnt {
flex: 1 1;
width: 100%;
border: 0.1rem solid black;
padding: 0.5rem;
display: flex;
flex-flow: row nowrap;
position: relative;
}
.foot {
flex: 0 0 5.0rem;
margin: 2.0rem 0;
width: 100%;
border: 0.1rem solid black;
}
.scroll {
flex: 0 0 2.2rem;
margin-left: 1.0rem;
background-color: rgb(200,200,200);
}
.scrl_can {
flex: 1 1;
border: 0.2rem solid blue;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
padding: 1.0rem;
height: 100%;
}
.content {
width: 100%;
height: 20rem;
background-color: rgb(180,180,180);
}
<div class="flex_can">
<div class="prnt">
<div class="scrl_can">
<div class="content"></div>
</div>
<div class="scroll"></div>
</div>
<div class="foot"></div>
</div>Version 2
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 2.0rem 0;
height: 100vh;
border: 0.5rem solid rgb(170,170,170);
}
div {
margin: 0;
padding: 0;
}
.flex_can {
display: flex;
flex-flow: column nowrap;
width: 50.0rem;
height: 100%;
margin: 0 auto;
}
.prnt {
flex: 1 1;
width: 100%;
border: 0.1rem solid black;
padding: 0.5rem;
display: flex;
flex-flow: row nowrap;
position: relative;
}
.foot {
flex: 0 0 5.0rem;
margin: 2.0rem 0;
width: 100%;
border: 0.1rem solid black;
}
.scroll {
flex: 0 0 2.2rem;
margin-left: 1.0rem;
background-color: rgb(200,200,200);
}
.scrl_can {
flex: 1 1;
border: 0.2rem solid blue;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
padding: 1.0rem;
height: 100%;
}
.content {
width: 100%;
height: 200rem;
background-color: rgb(180,180,180);
}<div class="flex_can">
<div class="prnt">
<div class="scrl_can">
<div class="content"></div>
</div>
<div class="scroll"></div>
</div>
<div class="foot"></div>
</div>