CODEWITHSUNDEEP
htmlcsstextarea
Matt Croak
Matt Croak

Reputation: 2888

textarea height is overflowing parent container

I have a div that contains another a child div. In that child div is an h1 tag and a textarea tag. I want the h1 tag and the textarea to fit the height of the parent div but it looks like the textarea is being pushed out of the parent div.

I have tried using box-sizing: border-box; for the textarea to ensure it stays within the parent div and while that works for the width, it does not work for the height.

I have also been able to provide a temporary fix by making the textarea have a height of 87% of the parent div but then if I zoom out in the browser eventually the textarea bleeds over the parent div. I have also tried putting overflow:hidden for the containing div which prevents the bleed but then I can't see the bottom portion of m textarea.

Ideally, I would like the textarea to not have a height that takes up the rest of the div that is not occupied by the h1 tag. I would also prefer to not have the textarea borders bleed over the containing div at all, which has even happened when I do overflow:hidden which I wanted to avoid using anyway because I want the overflow to be auto to account for lack of word wrap.

If you inspect the snippet you'll see how the textarea bleeds out of the containing div vertically.

EDIT

I have considered using flexbox but I plan on having the left and right borders of the div being draggable and I'm not sure if I can use flexbox while allowing the div to be easily resized based on border dragging. I'm not sure if this is doable but I am open to suggestions!

.container {
  width: 90%;
  display: block;
  margin: auto;
  /*display: inline-block;*/
  border: solid 1px cadetBlue;
  /*grid-template-columns: 300px 300px;*/
}

.topContainer{
  display: flex; 
  margin: auto;
  height: 300px; 
  border-bottom: solid 1px cadetBlue;
}

.innerBox{
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow-y: auto;
  resize: none;
  box-sizing:border-box;
  border: solid 1px cadetBlue;
}

.view{
  width: 100%;
  height: 300px;
  overflow: auto;
}

.box-title{
  width: 100%;
  margin: auto;
  height: 10%;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sectionContainer{
  height: 100%;
  width: 100%;
  position: relative;
}

.sectionContainer.html > div > .innerBox{
  border-left:  solid 0px transparent;
  border-right: solid 0px transparent;
}

.sectionContainer.js > div > .innerBox{
  border-right: solid 0px transparent;
}

.sectionContainer.css > div > .innerBox{
  border-right: solid 0px transparent;
}

.sectionContainer > div{
  width: 100%;
  height: 100%;
}
<div class='container'>
        <div class='topContainer'>
<div class="sectionContainer">
              <div>
              <h2  class="box-title" style='border-left: solid 1px cadetBlue;'>JavaScript</h2>
             <textarea class="innerBox" style="width: 100%;">
        </textarea>
              </div>
          </div>
  </div>
</div>

Upvotes: 1

Views: 2588

Answers (2)

Rob Monhemius
Rob Monhemius

Reputation: 5144

You could simplify you html and css drastically and use flexbox.

.sectionContainer // acts as a flexbox.

.sectionContainer>.box-title{
  flex: 0 0 auto; // title can not grow or shrink and has the regular height
}
.sectionContainer>.innerBox{
  flex: 1 1 auto; // textarea can grow or based on the leftover area
}

I animated the example to show changing the .sectionContainer width or height has the desired effect.

.sectionContainer{
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  height: 300px;
  width: 100%;
  animation: animateWidth 3s infinite;
  position: relative;
}

.sectionContainer>.box-title{
  flex: 0 0 auto;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.sectionContainer>.innerBox{
  flex: 1 1 auto;
  width: 100%;
  padding: 5px;
  box-sizing:border-box;
}
@keyframes animateWidth {
  0%{
    width: 100%;
  }
  25%{
    width: 50%;
  }
  50% {
    width: 100%;
    height: 300px;
  }
  75% {
    height: 150px;
  }
  100% {
    height: 300px;
  }
}
<div class="sectionContainer">
   <h2  class="box-title">JavaScript</h2>
   <textarea class="innerBox"></textarea>
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 273990

Use flexbox but don't make the textarea a flex item to avoid having issue with resize. Consider a wrapper around it.

.sectionContainer{
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  height: 300px;
}

.sectionContainer>.box-title{
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sectionContainer>.innerBox{
  flex-shrink:0;
  flex-grow:1;
}
.sectionContainer>.innerBox textarea {
  height:100%;
  width:100%;
  box-sizing:border-box;
}
<div class="sectionContainer">
   <h2  class="box-title">JavaScript</h2>
   <div class="innerBox"><textarea ></textarea></div>
</div>

Upvotes: 1

Related Questions