JSFiddle - React, Tailwind, and code Playground
by Sophie
HTML
<div id="container">
<div id="container2">
<div id="content">
Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here Content here
</div>
</div>
</div>
<div class="wrapper">
<div class="wrapper2">
<div class="onm-self-evaluation-card-content-wrapper" style="
background: red;
/* position: relative; */
width: 100px;
overflow: scroll;
height: 100px;
"><div class="onm-self-evaluation-card-content"><span class="onm-self-evaluation-card-subheader">Less skilled</span><span class="onm-self-evaluation-card-paragraph"><span style="color: red;">Could not find text: slides,self_evaluation_cards,cultivates_innovation_2018,less_skilled</span></span><span class="onm-self-evaluation-card-subheader">Skilled</span><span class="onm-self-evaluation-card-paragraph"><span style="color: red;">Could not find text: slides,self_evaluation_cards,cultivates_innovation_2018,skilled</span></span><span class="onm-self-evaluation-card-subheader">Overused skill</span><span class="onm-self-evaluation-card-paragraph"><span style="color: red;">Could not find text: slides,self_evaluation_cards,cultivates_innovation_2018,overused_skill</span></span><span class="onm-self-evaluation-card-subheader">Talented</span><span class="onm-self-evaluation-card-paragraph"><span style="color: red;">Could not find text: slides,self_evaluation_cards,cultivates_innovation_2018,talented</span></span></div></div>
</div>
</div>
CSS
/* #container2{
height: 100px;
width: 100px;
}
#container{
height: 100px;
width: 100px;
}
#content{
width: 100%;
height: 100%;
overflow: scroll;
padding-right: 15px;
}
*/
#container {
width: 100px;
height: 500px;
overflow: hidden;
}
#container2 {
}
#content {
height: 100px;
background: blue;
overflow: scroll;
}
.wrapper2 {
border: 2px solid blue;
position: absolute;
}
.wrapper {
border: 2px solid blue;
position: relative;
}