css Question posted in
Some basic documentation can be found here.

Css – Div wont collapse smaller than content

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    If you want to let the top-child to have a scroll bar, you need to set max-height for that div by using calc to minus height of sibling and bottom-child.

    Please check in full page

    body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grand-parent{
   display:flex;
   flex-direction:column;
   height:calc(100vh - 2px);
   border:1px solid #000;
}

/*Total height = 70px (50px + top 10px + bottom 10px)*/
.sibling{
  min-height:50px;
  padding:10px; 
}

.parent{
  flex:1;
  display:flex;
  flex-direction:column;
}

.top-child{
  flex:1;
  padding:10px;
  max-height:calc(100vh - 170px); /* Screen's height minus sibling and bottom child's height*/
  overflow-x:hidden;
  overflow-y:scroll;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}

/*Total height = 120px (100px + top 10px + bottom 10px)*/
.bottom-child{
  min-height:100px;
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search