0

Consider the following HTML + CSS code:

<section style='max-width: 300px; padding: 10px; background-color: beige'>
  <form style='background-color: blue'>
    <input type='text' style='width:100%'>
    <textarea style='width: 100%'></textarea>
    <button type='submit' style='float: right'>send</button>
  </form>
  <hr>
</section>

Since the submit <button> is overflowing its parent <form> element, I would expect that overflow: hidden should (at best) clip the button and turn the rest invisible: 

<section style='max-width: 300px; padding: 10px; background-color: beige'>
  <form style='background-color: blue; overflow: hidden'>
    <input type='text' style='width:100%'>
    <textarea style='width: 100%'></textarea>
    <button type='submit' style='float: right'>send</button>
  </form>
  <hr>
</section>

However, this is not the case. Instead of clipping the overflowing content, the parent element <form> was increased in order to contain all its content, including the overflowing <button>.

Over the web there are some hints about the reason for that. Example: "The overflow property only works for block elements with a specified height.", w3schools. Even so I'm still unsure of the reason why this happened.

Question

Why this happened?

Mark Messa
  • 440
  • 4
  • 22
  • 1
    You've answered your own question there "The overflow property only works for block elements with a specified height." - You haven't specified a height property on the form. – Brett East Oct 18 '19 at 21:02
  • 1
    you are using a clearfix method making the floating button inside the parent element – Temani Afif Oct 18 '19 at 21:51
  • @BrettEast > _"You haven't specified a height property on the form."_ If the browser can't hide the overflowing content, shouldn't it do nothing instead? Seems very strange the browser just deciding to enlarge the
    element ...
     – Mark Messa Oct 18 '19 at 22:02
  • What do you mean by "enlarge the form element". The form element is just a wrapper to your code, its height is based on the size of its content. If it had one input it would be one input high, if it had 100 buttons it would be 100 buttons high. Why do you think anything is overflowing at all? – Brett East Oct 18 '19 at 22:17
  • @TemaniAfif You are correct, this issue is related with clearfix. – Mark Messa Oct 18 '19 at 22:19
  • 1
    @BrettEast the button is overflowing because it's floated, you can check the blue coloration to notice this – Temani Afif Oct 18 '19 at 22:26
  • @TemaniAfif on my phone, so can't check exactly, but you're the css guru anyway. I also can't see any clearfix in this code, and a height on the form will fix the overflow issue – Brett East Oct 18 '19 at 22:32

0 Answers0