0

While using align-items: center the whole content is not visible as you can see in below snippet .

The work around this problem are removing align-items: center but when there is less content it will not be centered.

Applying a max-height or fix height to the class inner by this way scroll bar will be created on inner but this also don't always solve the problem as sometimes when window height is less than also content is hidden.

Are there any way to cope up with this problem or have to use a different properties for centering the inner

#outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#inner {
  width: 50%;
  height: 100vh;
  /*This auto in main code*/
  min-height: 500px;
  padding: 8px 16px 0;
  position: relative;
  overflow: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
}

#btn {
  cursor: pointer;
  position: sticky;
  font-size: 22px;
  font-weight: 900;
  top: 0;
  right: 0;
  padding: 5px 9px;
  margin: 0 0 0px auto;
}
<div id="outer">
  <div id="inner">
    <div id="btn">X</div>
    <p> 1st part </p>
    <p> 2nd part </p>
    <p> 3rd part </p>
    <p> 4th part </p>
    <p> 5th part </p>
    <p> 5th part </p>
    <p> 5th part </p>
    <p> 5th part </p>
    <p> 5th part </p>
    <p> 6th part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>
    <p> other part </p>

    <p> other part </p>

  </div>
</div>

But with the suggested answer sticky property won't work which is inside inner class . By the way it is still not visible(sticky part) now also but when content is visible , it is not working as sticky .

Rana
  • 2,500
  • 2
  • 7
  • 28
  • Maybe you shouldn't make your outer div fixed? – Royalty Oct 18 '21 at 12:37
  • Yup but as fixed is need the above link to question will perfectly solve the problem @Royalty . I will keep this question so that anyone come searching something like this will get to right link . – Rana Oct 18 '21 at 12:40
  • @TemaniAfif that way `sticky` property wont work which is inside `inner` – Rana Oct 18 '21 at 13:20

0 Answers0