How to use flex for overflow auto in css

Question

I. am new to the react .Here I have div which looks like ,

<div>
  <div class="wrapper"></div>
  <div class="secondwrapper"></div>
</div>



.secondwrapper {
  padding: 25px 85px 25px 85px;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

SO, Now for the secondwrapper div I want to add the overflow auto. and first div is to be fixed.

SO, solution which I used was

 height : calc(100vh -  (height of wrapper div))
    overflow-y: auto

which worked. But I am trying to solve this using the flex .

How can I solve this?

Answer 1

For flex you want to use a container for your wrappers. This container then decides the direction and display for it children.

html,
body {
  height: 100%;
  margin: 0;
}

.wrappercontainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapper {
  background-color: cornflowerblue;
  flex-basis: 100px;
}

.secondwrapper {
  padding: 25px 85px 25px 85px;
  background-color: chartreuse;
  flex: 1;
  overflow-y: auto;
}

.somelongcontent {
  background-color: chocolate;
  height: 2000px;
}

<div class="wrappercontainer">
  <div class="wrapper"></div>
  <div class="secondwrapper">
    <div class="somelongcontent">
      I am content
    </div>
  </div>
</div>

A great introduction source to flex layout is https://flexboxfroggy.com/