form tag affecting css styling

Question

I'm pretty terrible at css, and get by only on SO answers - however I can't find any explanation for this specific issue.

I have a form with one textarea and one button(input/submit), nothing else, I'm trying to have the textarea fill all of the screen except for the 30px taken up by the button at the very bottom of the screen so it looks something like this:

I'm trying to achieve this using flex as described in this answer.

my body currently looks like this:

<div class="box">
    <form action="./save.php" method="post">
        <div class="row content">
            <textarea rows="1" cols="1" name="document" class="box1">text</textarea>
        </div>
        <div class="row footer">
            <input type="submit" value="Save Changes." class="btn1">
        </div>
    </form>
</div>

my btn1 and box1 classes apply width:100%; height:100%; on both items, some basic color styling, padding and font changes, as well as a 1px border.

my remaining css looks like this

html,body { height:100%; margin:0; }
.box { display:flex; flex-flow:column; height:100%; width:100%; }
.row.header { flex: 0 0 auto; }
.row.content { flex: 1 1 auto; }
.row.footer { flex: 0 0 30px; }

it doesn't work, depending on the styling of form it either fills a small amount of the page, or both elements each take up a full page.

however when I remove the form tag from my html entirely everything fixes itself and it displays and acts exactly as I would have expected.

i've tried styling the form tag the same as html,body, also tried setting it to hidden, displaying as block and inline-block etc. however I can't seem to get it to not affect anything.

Is there a way I can make the form tag not affect styling at all?

Johannes · Accepted Answer · 2017-09-14T13:13:24.013

The form tag has to be the flex container, not the .box DIV (.box' s only child is the form element, so that wouldn't make sense):

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  height: 100%;
}

form {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

.row.header {
  flex: 0 0 auto;
}

.row.content {
  flex: 1 1 auto;
}

.row.footer {
  flex: 0 0 30px;
}

.btn1,
.box1 {
  width: 100%;
  height: 100%;
}

.btn1 {
  background: red;
}

.box1 {
  background: green;
}

<div class="box">
  <form action="./save.php" method="post">
    <div class="row content">
      <textarea rows="1" cols="1" name="document" class="box1">text</textarea>
    </div>
    <div class="row footer">
      <input type="submit" value="Save Changes." class="btn1">
    </div>
  </form>
</div>

This worked perfectly, thanks so much - knew it was something simple :) — colsw, Sep 14 '17 at 13:35

form tag affecting css styling

1 Answers1