為什么我的div不能占據#area大小的100％？

Question

您好，我想將我的div插入#area內，但#area 。

#area {
  width: 400px;
  height: 400px;
  display: flex;
  border: 1px solid red;
}

#area div { flex: 1; }

#exde { background-color: chocolate; }
#right { background-color: aqua; }

<form action="http://www.google.lt" method="get">
  <div id="area">
    <div>
      <label for="exde">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea>
    </div>
    <div>
      <label for="right">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea>
    </div>
  </div>
</form>

所以，如果有人可以幫我填他們每個人拿一半的#area與巧克力色，另一半用藍色，我會感激。

Answer 1

他們是這樣：

 #area {width:400px; height:400px; display:flex; border: 1px solid red;} #area div { flex:1; border: 2px solid green; } #exde {background-color:chocolate;} #right {background-color:aqua;} 

 <form action="http://www.google.lt" method="get"> <div id="area"> <div><label for="exde">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea></div> <div><label for="right">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea></div> </div> </form> 

textarea的不是，因此您可能想要更改其大小。

例如，您可能想要將此添加到您的css ：

#exde, #right {
     min-width: 100%;
     max-width: 100%;
     box-sizing: border-box;
}

Answer 2

 #area { width: 400px; height: 400px; display: flex; border: 1px solid red; } #area div { flex: 1; } #exde { background-color: chocolate; width:100%;box-sizing: border-box;} #right { background-color: aqua; width:100%;box-sizing: border-box;} 

 <form action="http://www.google.lt" method="get"> <div id="area"> <div> <label for="exde">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea> </div> <div> <label for="right">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea> </div> </div> </form> 

這是您問題的一種簡單解決方案， 將寬度100％加上框大小設置為兩個div ，如下所示：

#exde {background-color:chocolate;width:100%;box-sizing: border-box;}
#right {background-color:aqua;width 100%;box-sizing: border-box;}

box-sizing屬性定義了如何計算元素的寬度和高度。