How to fit textarea exactly inside a div - CSS


Tags: css

Problem :

I have a <div> with fixed width and height (may be in px / %). I have a <textarea> inside that, having a width of 100%, like;

HTML

<div>
    <textarea></textarea>
</div>

CSS

div{
    height: 200px;
    width: 300px;
    background: red;
}
textarea{
    height: 100px;
    width: 100%;
}

But the </textarea> is stretching out of the container, like; Screenshot

I want the textarea to stretch to 100% with of the container. How can I achieve this?

Here is the working fiddle.

Thanks in advance...:)



Solution :

Add box-sizing:border-box to the textarea's CSS.


    CSS Howto..

    How does css scale transform affect document flow?

    How to handle an image inside bootstrap column?

    HTML Imported text doesn't show line feeds correctly

    How do I create a margins on Google maps? [closed]

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to get CSS styling to shown on page? [closed]

    CSS How to fix element position after some scroll without using jquery

    How to apply css to top level element only

    How to change the font-size uniformly?

    How can I give a settimeout to a div on first click but not on second click?

    CSS/HTML - How do I get text to go behind an image inside a div

    How to parse and extract CSS selectors as strings?

    How to reset default button style in Firefox 4 +

    How do I move all the li elements with specific css style to another ul?

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    How to display background-image on entire site

    How to align two svg masked images on the same line

    How to resize trapezoid in CSS when browser window resize

    Show unordered list's bullet points when display:table

    How do you change the background opacity in CSS?

    My Background image doesn't show up and is not inspected in the browser [closed]

    How to get text within div to be relative to the div's width and height, CSS, HTML

    hovering over list item, only one item showing up instead of all

    How to mark up a tiled layout with CSS?

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How to eliminate scroll text jumps

    How to align a div with the right of a table?

    How to make a sudoku grid using HTML and CSS?

    How to stack two UL classes directly on top of one another in the middle of the page