Textarea 100% width of rest of screen

Question

I'm trying to get the text area to fill the remaining width of a screen. I have everything setup nicely but cant seem to implement any solutions to get it to will the rest of the screen.

I'm purposefully trying not to fix to many width/heights as to all the page to dynamically fit some content (ie the main content area is designed to fill 100% height with a flex box)

I have stripped my code to the layout basics:

    <html>
   <head>
      <style>
         *, *:before, *:after
         {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         }
         *
         {
         font-family: Arial !important;
         }
         html, body
         {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         background-color: #e6e6e6;
         }
         .flexbox-parent
         {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: flex-start; /* align items in Main Axis */
         align-items: stretch; /* align items in Cross Axis */
         align-content: stretch; /* Extra space in Cross Axis */
         overflow-x: hidden;
         }
         .fill-area-content
         {
         flex: 1; /* same as flex: 1 1 auto; */
         /* Needed for when the area gets squished too far and there is content that can't be displayed */
         overflow-y: auto; 
         overflow-x: hidden;
         }
      </style>
   </head>
   <body>
      <div class="flexbox-parent">
         <div style="width: 100%; display: block;">
            <div style="text-align: right; background-color: #666666;">
               TOP
            </div>
            <div style="border: #000000 thin solid; width: 162px; text-align: center; padding: 10px; margin: 10px; float: left;">
               LEFT
               AREA
            </div>
            <div class="fill-area-content" style="border: #000000 thin solid; text-align: center; padding: 10px; margin: 10px; ">
               <div style="float: left; ">
                  <div>
                     <div style="display: inline-block; background-color: green">
                        SOMETHING
                     </div>
                  </div>
               </div>
               <div style="float: left; padding-left: 5px; padding-right: 5px; text-align: right; background-color: orange">
                  SOMETHING
               </div>
               <div style="float: left; padding-left: 5px; padding-right: 5px; background-color: red ">
                  <textarea rows="12" id="notes" cols="35" > 
                  NEEDS TO BE 100% OF THE REST OF SCREEN
                  </textarea> 
               </div>
            </div>
         </div>
         <div class="fill-area-content"  style="background-color: #ffffff">
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
            MAIN CONTENT<br>
         </div>
      </div>
   </body>
</html>

Thanks for any help as its driving me mad

your div is in the wrong place! it should be inside the body tag! — Han Arantes, Mar 14 '16 at 20:03
Looks like duplicate http://stackoverflow.com/questions/1260122/expand-a-div-to-take-the-remaining-width — Vitaly Kulikov, Mar 14 '16 at 20:03
The code is very dirty, it is difficoult to solve the problem. Maybe I can recreate this schema from scratch. — Claudio King, Mar 14 '16 at 20:08
Are you saying that you do not even want the "some content" to have a % width? Like 15% of the page for the first "some content", 15% for the second, "some content", and then the remaining %70 for the text box? Because you are using floats, that is going to be...interesting to accomplish. You may need to define % widths. — Jeff.Clark, Mar 14 '16 at 20:29
If you remove the 'float: left;' on the div with the '' in it, and add a 'margin-left: 204px;' instead you will get a full width textarea... or was the that what you're trying to avoid doing? https://jsfiddle.net/ukfLkqed/ Or if you switch to % rather than a fixed width 167px left area, like this: https://jsfiddle.net/ukfLkqed/1/. I'm not sure you'll be able to fix the width of the left area and then float elements at 100% remaining width without giving them widths to match — tymothytym, Mar 14 '16 at 20:34

score 0 · Answer 1 · answered Mar 14 '16 at 20:24

I recreated your layout because your code was a bit dirty to understand.

*, *:before, *:after{
  box-sizing: border-box;
}

.top{
  text-align: right;
  background: gray;
}

.flex-container{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 10px 0;
}
.left-area, .right-area{
  border: 1px solid black;
  padding: 10px 5px;
}

.left-area{
  width: 18%;
  text-align: center;
}

.right-area{
  width: 78%;
}

.sm-1, .sm-2{
  display: inline-block;
}

.sm-1{
  background: green;
}

.sm-2{
  background: yellow;
}

.textarea-container{
  background:red;
  padding: 5px 10px;
  margin-top: 5px
}

.textarea-container textarea{
  width: 100%;
}

<div class="top">Top</div>

<div class="flex-container">
  <div class="left-area">LEFT AREA</div>
  <div class="right-area">
    <div class="sm-1">Something</div>
    <div class="sm-2">Something</div>
    
    <div class="textarea-container">
      <textarea cols="30" rows="10">Hello this is a texarea</textarea>
    </div>
  </div>
  
</div>

Thanks for your help. The left area needs to be fixed width but the right area 100%. The text area (red area needed to be to the right of the two something boxes... if that makes sense? — user2229747, Mar 14 '16 at 20:28

Textarea 100% width of rest of screen

1 Answers1