There is a form of communication - a modal window in which textarea is located. It is necessary that when resiz'e it was possible to stretch the textarea to a height greater than the container, and scrolling appeared at the container itself.

form { width: 540px; max-height: 700px; max-width: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 1900; background-color: gray; padding: 25px; display: flex; flex-direction: column; overflow-y: auto; } textarea { resize:vertical; } 
 <form action=""> <input type="text"> <textarea></textarea> <input type="text"> </form>

In this example, you can stretch the input field to the full height, but not more. If suspicion that this is due to display: flex . Enlighten please

    1 answer 1

    That's right - flex superfluous:

     form { width: 540px; max-height: 700px; max-width: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 1900; background-color: gray; padding: 25px; overflow-y: auto; } form * { display: block; width: 100%; box-sizing: border-box; } textarea { resize: vertical; height: calc(100% - 50px); } 
     <form action=""> <input type="text"> <textarea></textarea> <input type="text"> </form>

    • I myself came about to this decision, but I would like to understand how flexbox works in this situation. Ie, if you place the blocks in a column through display:flexbox and flex-direction:column , why doesn't the textarea stretch more than the height of the parent? - Dantessss
    • @Dantessss does not stretch because it rests against the lower input , and it in turn is limited to flex . All flex elements are located as if in the same plane, so no absolute or overflow rolled with it. Something like this. - UModeL
    • Okay, I understood about it, but where can the thread find out more about this? And then I didn’t find anything on Google on this topic - Dantessss