I'm trying to create a "chat window", I already have most things oriented, but I can not get a textarea to occupy the space that is "left" vertically in the window (this textarea is not the last element of the window).
Below is my complete code (the textarea I want to adjust is the one within div id="conversation" ):
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<title>
chat prototype
</title>
</head>
<body>
<div id="completeSite" style="display: flex; flex-flow:row wrap" >
<div id="taskBar" class="col-md-12" style="border-style: solid; ">
TASKBAR
</div>
<div id="userList" class="col-md-2" style="border-style: solid;">
USERLIST
</div>
<div id="chatWindow" class="col-md-10" style="border-style:solid;">
<div id="conversation" class="row">
<textarea readonly class="form-control" style="overflow:auto; resize:none; border-style: solid;">CONVERSATION</textarea>
</div>
<div id="MessageInput" class="input-group row">
<textarea class="form-control" id="message" placeholder="Message" style="height: 200px; overflow:auto; resize:none;"></textarea>
<span class="input-group-btn">
<button class="btn" id="submitMessageButton" type="button" style="height: 200px; background-color: #999999">Send</button>
</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script></body></html>Allnon-bootstrapCSSisindividuallyplacedonallelementswithstyle=.
SofarIhavetriedthefollowingthings:
1.%relative%withpercentages:Theresultisnotwhatyouwantwhenthewindowisminimized(sizeisalwaysbasedonthesizeofthescreenandnotthebrowserwindow).
height: in element display:flex; flex-direction:column and later in another attempt also in element div id=conversation . Always using div id=chatWindow in the textarea that I want to adjust. In none of the cases do I get the desired result (This second form I saw in an answer to a similar problem in stackoverflow in English, so I decided to test).