I'm creating a page where I want grand-parent to take the whole vertical height of the page Sibiling and Bottom-Child to be a fixed height and have parent and top-child to take up as much space as possible vertically without causing a scroll bar, except for within top-child.
Link to code pen: https://codepen.io/dante-e/pen/MWxrMxe
if top-child is empty it works as I want, however if it is filled with alot of content, it won't shrink top-child or add a scrollbar to it when I make the page vertically smaller but instead add a scroll bar to the grand-parent
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grand-parent {
display: flex;
flex-direction: column;
/* Set the grand-parent container to a column layout */
height: 100vh;
/* Ensure the grand-parent container takes the full height of the viewport */
}
.parent {
display: flex;
flex-direction: column;
/* Set the parent container to a column layout */
flex: 1;
/* Take as much space as possible within the grand-parent */
}
.top-child {
flex: 1;
/* Take as much space as possible within the parent */
border: 1px solid #000;
padding: 10px;
overflow: auto;
}
.bottom-child {
min-height: 101px;
/* Set a minimum height for the bottom child */
border: 1px solid #000;
padding: 10px;
}
.sibling {
min-height: 50px;
/* Adjust the height as needed */
border: 1px solid #000;
padding: 10px;
}<div class="grand-parent">
<div class="sibling">Sibling of Parent</div>
<div class="parent">
<div class="top-child">***lots of content***</div>
<div class="bottom-child">Bottom Child</div>
</div>
</div>You could add overflow: hidden or min-height: 0 to the .parent element, so it won't take at least min-content space vertically to allow its child element to show scrollbar correctly:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grand-parent {
display: flex;
flex-direction: column;
/* Set the grand-parent container to a column layout */
height: 100vh;
/* Ensure the grand-parent container takes the full height of the viewport */
}
.parent {
display: flex;
flex-direction: column;
/* Set the parent container to a column layout */
flex: 1;
/* Take as much space as possible within the grand-parent */
/* added */
overflow: hidden;
}
.top-child {
flex: 1;
/* Take as much space as possible within the parent */
border: 1px solid #000;
padding: 10px;
overflow: auto;
}
.bottom-child {
min-height: 101px;
/* Set a minimum height for the bottom child */
border: 1px solid #000;
padding: 10px;
}
.sibling {
min-height: 50px;
/* Adjust the height as needed */
border: 1px solid #000;
padding: 10px;
}<div class="grand-parent">
<div class="sibling">Sibling of Parent</div>
<div class="parent">
<div class="top-child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="bottom-child">Bottom Child</div>
</div>
</div>