vanillaHoman vanillaHoman - 9 days ago 4x
CSS Question

Textarea don't make parent grow

I have a textarea in a form inside a div with max-height 80. My probles is that the textarea should grow from it's initial height to the max height from the cb-input div when the text in the textarea is too long to its initial height.

<div class="cb-input">
<form class="cb-form" action="">

These are my css classes.

.cb-input {
width: 100%;
min-height: 45px;
max-height: 80px;

.cb-form {
overflow: hidden;
width: 100%;
height: 100%;

.cb-input textarea{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 6px 14px 2px 10px;
width: 100%;
height: 100%;
font-family: Roboto;
font-size: 14px;
border: none;
resize: none;
overflow-y: auto;

I don't know if the textare just don't grow because the overflow-y: auto but maybe. Any idea?


Here is a working fiddle

height can be adjusted by changing the css.

Hope it may help.