I have a child div of line numbers and a textarea inside a parent div. So what I required is only parent div should be scrollable, neither textarea nor child div. Also height of the parent should be fixed to 170px.
Following is Jsx code
<div
style={{
display: 'flex',
overflowY: 'auto',
height: '150px',
}}
>
<div style={{ marginRight: '10px' }}>
{lineNumbers?.map((item: any) => (
<TextWrapper
key={item}
text={`${item}`}
className={'marginTB2'}
/>
))}
</div>
<textarea
rows={6}
value={enteredAdrs}
onChange={(e) => {
setEnteredAdrs(e.target.value)
}}
onBlur={handleManualData}
onKeyDown={handleKeyDown}
/>
</div>
following is css code
textarea{
background-color: #151414;
color: #fff;
padding: 0;
line-height: 157%;
box-sizing: border-box;
border: none;
margin: 0;
width: 100%;
resize: none !important;
height: 100%;
}
textarea:focus{
box-shadow: none !important;
outline: none;
}