Fixing size of div to make it scrollable without expanding the entire view

user_16389043 0
Viewed 112

I have a screen in my React App that serves as an Overview where a list should display all created accounts. But I want a button fixed at the bottom and the account list scrollable in the area that is not taken by the header elements and the bottom button. So it should fill the entire screen but only the list should be scrollable. I tried with flex-grow but it did not seem to work...Thanks for your help!

.list {
  overflow: scroll
}
<div class="container">
  <header>some Header</header>
  <p>Some description</p>
  <div class="list">
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
  </div>
  <button>Some button</button>
</div>

reactjs css html
1 Answers

Use scroll instead of scrollable. Also a max-height for list:

* {
  box-sizing: border-box;
}
body{
  margin: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
}

.list {
  overflow-y: scroll;
  max-height: 50vh;
}

button {
  width: 100px;
}
<div class="container">
  <header>
    <p>some Header</p>
    <p>Some description</p>
  </header>

  <div class="list">
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
    <p>Some value</p>
  </div>
  <button>Some button</button>
</div>

user_170071840
Related