parent expand when child expand css - react

Question

I have a textarea that expand up from bottom. I also want that the parent div will expand with him.

JS

const [value, setValue] = useState("");
const rows = value.split("\n").length;

<div className='right-bottom'>
<textarea type="text" className="chat-box" value={value} rows={rows}
  onChange={(e) => setValue(e.target.value)} style={{ height: "unset" }} />
</div>

CSS

.right-bottom{
    background-color: black;
    float: right;
    width: 33vw;
    height: 7vh;
    position: relative;
}
.chat-box{
    width: 70%;
    border-radius: 25px;
    border: solid 1px #b7b7b7;
    background-color: #eeeeee;
    margin-left: 2%;
    margin-bottom: 1%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top:0.5%;
    resize: none;
    vertical-align: middle;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    max-height: 13vh;
}

I want that the black parent div will expand also with the textarea:

Does this answer your question? [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — Reza Sam, Dec 12 '20 at 07:33
no.. the textarea is expand.. I just need the parent div to expand too. — Sahar Biton, Dec 12 '20 at 07:45

b3hr4d · Answer 1 · 2020-12-12T09:13:24.533

I made this for u , somthing like this should be good.

HTML - CSS

.body{
  display:flex;
  flex-direction:column;
  width:200px;
  height:180px;
  margin:auto;
  background-color:red
}
.chat-area {
  flex:9
}
.text-area-holder{
  flex:1;
  background-color: black;
}
.chat-box{
  display: block;
  overflow: hidden;
  background-color: white;
  margin: 2px;
  padding: 0 5px;
  max-width: 80%;
  min-height: 25px;
  line-height: 25px;
}

<div class="body">
  <div class="chat-area"></div>
    <div class="text-area-holder">
    <span class="chat-box" role="textbox" contenteditable>    
    </span>
  </div>
</div>

REACT

const App =()=> {
  const expandHandler = (e) =>{
   const textarea = e.currentTarget
   textarea.style.height = calcHeight(textarea.value) + "px";
  }
  function calcHeight(value) {
    let numberOfLineBreaks = (value.match(/\n/g) || []).length;
    let newHeight = 20 + numberOfLineBreaks * 20;
    return newHeight;
  }
 return (
    <div className="body">
    <div className="chat-area"/>
      <div className="text-area-holder">
      <textarea onKeyUp={expandHandler} className="chat-box"  />    
    </div>
  </div>
 )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.body{
  display:flex;
  flex-direction:column;
  width:200px;
  height:180px;
  margin:auto;
  background-color:red
}
.chat-area {
  flex:9
}
.text-area-holder{
  flex:1;
  background-color: black;
}
.chat-box{
  display: block;
  overflow: hidden;
  background-color: white;
  margin: 2px;
  padding: 0 5px;
  max-width: 80%;
  height: 20px;
  line-height: 20px;
  resize:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Source idea : https://css-tricks.com/auto-growing-inputs-textareas/

I'm trying to add but it is shows me a block and i can't write inside like this textbox... it is should work with react? — Sahar Biton, Dec 12 '20 at 08:33
@סהרביטון No problem, so mark this as correct answer maybe ?! :) — b3hr4d, Dec 12 '20 at 11:04

parent expand when child expand css - react

JS

CSS

1 Answers1