Flex: Textarea height worked in Chrome but not Safari

Question

So I'm trying to get my textarea height to reach the bottom of the page.

Problem is, the code below worked in Chrome but doesn't for Safari. I tried adding vendor-prefixes but no change.

Also I'm using Bootstrap.

HTML

<div class="container">
  <div class="row twenty-percent">
    <div id="address" class="col-xs-9 col-xs-offset-3">
      <div class="row row1">
        <div class="col-xs-6">
          <label class="sr-only" for="exampleInputName2" required>Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
        </div>
        <div class="col-xs-6">
          <label class="sr-only" for="exampleInputEmail3" required>Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="row row2">
        <div class="textareaWrapper col-xs-12">
          <textarea placeholder="Your enquiry" id="message" class="form-control" required></textarea>
        </div>
      </div>
      <div id="submit">
        disqus
        <button type="button" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
}

.container,
.twenty-percent,
#address {
  height: 100%;
}

#address {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.row1 {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

.row2 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
}

.textareaWrapper {
  height: 100%;
  display: -webkit-flex;
  display: flex;
}

textarea {
  height: 100%;
/* resize is optional */
  resize: none;
}

#submit {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

http://codepen.io/wheelhot/pen/ZLByQY?editors=1100

possible duplicate: http://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Jan 17 '17 at 17:25
@Michael_B It's close but he has a different problem where he's using table and the height:100% wasn't working in Chrome 40. — Omar Tan, Jan 18 '17 at 00:35
@OmarTan, I understand, but the answer goes into reasons why percentage heights in combination with flex layout may not work in Chrome / Safari. — Michael Benjamin, Jan 18 '17 at 00:37

score 0 · Accepted Answer · answered Jan 17 '17 at 15:18

0

remove the height: 100% from the textAreaWrapper. Still works on both.

answered Jan 17 '17 at 15:18

Ben Davison

713
7
15

Thanks! that did the trick! Surprised that the answer was so simple. Somehow on my actual site, I also had to removed `:height:100%` from textarea as well. So any idea why does having `height:100%` seems to cause an issue with Safari and not Chrome? – Omar Tan Jan 18 '17 at 00:26

Flex: Textarea height worked in Chrome but not Safari

1 Answers1