Qwertie Qwertie - 5 months ago 9
CSS Question

Fluid width textarea with flexbox; percentage is ignored

I have a text area centered on the page with a flexbox div which I would like to have 80% as wide as the page however with flexbox it seems that I can not use % as a unit for width.

My html:

<div class="textdiv">
<form>
<div>
<textarea>
</textarea>
</div>
</form>
</div>


And my css:

.textdiv {
display: flex;
justify-content: center;
}

textarea {
width: 80%;
}


When using flexbox the width is ignored unless I switch to another unit. Is there any way I can set the width of this text area to be 80% of the page?

Answer
Use flex on the div above the text area

<div >
    <form>
        <div class="textdiv">
            <textarea>
            </textarea>
        </div>
    </form>
</div> 

textarea {
  flex: 0 0 80%;
}

Change the position of textdiv class

Comments