CSS prevent child overflowing parent height-CodePudding

I have the following CSS layout:

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
}

main h2 {
  padding: 20px 20px 10px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}

<nav>
  <h1>Header</h1>
</nav>
<main>
  <h2>Your items:</h2>
  <div id="item-wrapper">
    <div id="item-selector">
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>

I want the scrollable div on the left to not exceed the height of the window. I have tried setting the height of <body> and <html> to 100vh and adding overflow: auto and overflow: hidden to body, html, #item-wrapper and #item-selector but none of these worked. If I give #item-selector and explicit height then it works, but I want it to fill the remainder of the window height so this isn't ideal. I would like #item-selector to not exceed the height of the page and to scroll when its contents exceed its height.

CodePudding user response：

You have to apply height settings to all parent elements, so html and body and #item-selector get height: 100%;, and main has to get a calculated height value, which subtracts the height of the nav and h2 elements from 100%. height: calc(100% - 130px); will approximately do that like in the snippet below, but you either would have to define exact height settings for nav and h2, or use javascript to get their actual heights.

* {
  margin: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 100%;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
}
main {
  height: calc(100% - 130px);

}
main h2 {
  padding: 20px 20px 10px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
  height: 100%;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
  height: 100%;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}

<nav>
  <h1>Header</h1>
</nav>
<main>
  <h2>Your items:</h2>
  <div id="item-wrapper">
    <div id="item-selector">
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>

CodePudding user response：

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  background-color: darkslateblue;
  color: white;
  padding: 20px;
  height: 10vh;
}

main h2 {
  padding: 5px 20px 20px 20px;
}

#item-wrapper {
  display: flex;
  padding: 10px;
  height:85vh;
}

#itemHeaderWrapper{
  height:5vh;
}

#item-selector,
#item-viewer {
  margin: 0 10px;
}

#item-selector {
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
}

#item-viewer {
  flex: 1;
  height: 50vh;
}

.item {
  border: 3px solid darkslateblue;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}

#item-viewer {
  border: 3px solid darkslateblue;
}

<nav>
  <h1>Header</h1>
</nav>
<main>
  <div id='itemHeaderWrapper'>
    <h2>Your items:</h2>
  </div>
  <div id="item-wrapper">
    <div id="item-selector">
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
      <div >
        <p style="font-size:50px;">Item</p>
      </div>
    </div>
    <div id="item-viewer">
      <p style="padding: 10px;">Select an item on the left to view more information</p>
    </div>
  </div>
</main>

In this code, I've wrapped the h2 tag in a div, id 'itemHeaderWrapper' which I've given a pre-defined height of 5vh. I've also set the height of the nav to 10vh. This means I can force the scrollable div on the left to have height 85vh and then scroll.