flexbox justify-content causes overflow: auto not work correctly-CodePudding

I have a container div that its content can grow vertically. I used overflow-y: auto for the container to make my page look good. But I need to place everything in the center when the content's height is smaller than the container's. So I used flexbox to do that. But the problem is that I can't scroll completely to see the top part of the contents.

Here is a simple example of the problematic code:

<html lang="en">
  <head>
    <style>
      .container {
        width: 20rem;
        height: 20rem;
        background-color: red;

        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        overflow-y: auto;

      }
      .child {
        width: 10rem;
        height: 40rem;
        background-color: blue;
        flex-shrink: 0;
      }
      .top {
        width: 1rem;
        height: 1rem;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div >
      <div >
        <div ></div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

One of the solutions to this problem is to use the reverse order of the elements in the flex-container, i.e. in your case, using flex-direction: column-reverse instead of flex-direction: column.

Example #1 below:

.container {
  width: 20rem;
  height: 20rem;
  background-color: red;
  display: flex;
  justify-content: center;
  flex-direction: column-reverse;
  align-items: center;
  overflow-y: auto;
}

.child {
  width: 10rem;
  min-height: 0;
  height: 40rem;
  background-color: blue;
  flex-shrink: 0;
  max-height: 150%;
}

.top {
  width: 1rem;
  height: 1rem;
  background-color: green;
}

<div >
  <div >
    <div >test</div>
  </div>
</div>

The second solution is to consider using for center alignment, you can also use justify-content: space-between and pseudo-elements ::after and ::before.

Example #2 below:

.container {
  width: 20rem;
  height: 20rem;
  background-color: red;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.container::before,
.container::after {
  content: '';
}

.child {
  width: 10rem;
  min-height: 0;
  height: 40rem;
  background-color: blue;
  flex-shrink: 0;
  max-height: 150%;
}

.top {
  width: 1rem;
  height: 1rem;
  background-color: green;
}

<div >
  <div >
    <div >test222</div>
  </div>
</div>