search

Home  >  Q&A  >  body text

How to create a flex container that allows vertical scrolling without specifying its height?

In the code snippet below, I expect the first and second containers to each occupy 50% of the window height, and I want the first container body to have vertical overflow.

Unfortunately when I put the huge chunk into the first container - it becomes larger than 50% of the page and the auto-overflow doesn't work.

Is there any way to not specify the height? 

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

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Problem with overflow</title>
</head>

<body>
  <div class="root">
    <div class="first-block">
      <div class="first-block-header"></div>

      <div class="first-block-body">
        <div class="first-block-content"></div>
      </div>

      <div class="first-block-footer"></div>
    </div>

    <div class="second-block">

    </div>
  </div>
</body>

</html>

P粉286046715P粉286046715484 days ago543

reply all(1)I'll reply

  • P粉391677921

    P粉3916779212023-09-12 10:14:45

    You have to wrap the block content in a div and set overflow-y to scroll in order to mark the entire block content as scrolling, otherwise only the middle part will scroll.

    And add overflow-y: auto; to the block itself to set it to scroll.

    Try this:

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

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.block-content-wrapper {
  overflow-y: scroll;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Problem with overflow</title>
</head>

<body>
  <div class="root">
    
    <div class="first-block">
    <div class="block-contant-wrapper">
      <div class="first-block-header"></div>

      <div class="first-block-body">
        <div class="first-block-content"></div>
      </div>

      <div class="first-block-footer"></div>
    </div>
      </div>

    <div class="second-block">

    </div>
  </div>
</body>

</html>

    reply
    0
  • Cancelreply