scroll the textarea content and a child div with parent div only in react

Question

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;
  }

Answer 1

Enjoy

<div className="textarea">
    <div className="container">
        <div className="numbers">
            {[...Array(lines)].map((_, i) => <span key={i}>{i+1}</span>)}
        </div>
        <textarea value={value} onChange={onChange} />
    </div>
</div>

.textarea {
    display: inline-flex;
    height: 170px;
    width: 100%;
    overflow-y: scroll;

    .container {
        display: flex;
        width: 100%;
        height: fit-content;
    }

    textarea {
        line-height: 28px;
        overflow: hidden;
        padding: 8px 12px;
        border: 0;
        outline: none;
        resize: none;
        width: 100%;
        font-size: 18px;
    }

    .numbers {
        padding-top: 8px;
        display: flex;
        flex-direction: column;
        width: 40px;
        line-height: 28px;
        align-items: center;
        font-size: 16px;
        padding-bottom: 18px;
    }
}