3

I have a button that is touching the end of the container. I want there to be a gap between the end of the container and the button. The margin bottom I put on the button is not working. Here is the css and html 

.events{
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items: center; /*center children horizontally*/
    overflow-y: auto;
    justify-content: start;
    background: grey;
}

.show-event-form {
    margin-top: 20px;
/**this margin bottom is not making space at the end of the container***/
    margin-bottom: 10px;
}

.event-container{
    background: linear-gradient(to bottom left, #f2fcef, #eff7f1);
    border-left:none;
    display: flex;
    width:433px;
    height: 425px;
    border: 2px solid black;
    overflow:hidden;
    overflow-y: auto
}


.container {
    display: flex;
    flex-direction: row;
    margin: 40px auto;
    padding: 20px;
    align-items: stretch;
    justify-content: center;
}
 <div class='container'>
   <div class='event-container'>
       <div class='events visible'>
          <button class='show-event-form rotate'>Add new event</button>
        </div>
    </div>
 </div>

Here is a codepen of the project https://codepen.io/icewizard/pen/ZmJByP . If you click on the pink 6 that is the date tomorow, you will see event text and if you scroll down the button will be at the bottom of the div without padding. How do I fix this?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
icewizard
  • 133
  • 1
  • 13
  • it seems to be fine, increase the margin – Temani Afif Dec 05 '18 at 22:24
  • I don't even see a gap. I'm looking in firefox and google chrome and in firefox there is no gap, in google chrome the button padding and height is broken but its still at the end with no gap. If I increase the margin-bottom to something like 100px nothing changes for me. What browser are you using? – icewizard Dec 05 '18 at 22:26
  • I am on Chrome and yes the button is weird but margin is working fine – Temani Afif Dec 05 '18 at 22:27
  • Alright thanks for trying to help. It seems to be just a browser issue after I rechecked it. It's working on chrome but not on firefox.. I'll have to use different styles then. Thanks. – icewizard Dec 05 '18 at 22:34
  • https://stackoverflow.com/q/38993170/3597276 – Michael Benjamin Dec 05 '18 at 23:51

1 Answers1

1

Can you try this please ?

.show-event-form {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px;
  flex-shrink: 0;
}
masis
  • 54
  • 5
  • Maybe you need to add [Vendor Prefixes](https://bitsofco.de/css-vendor-prefixes/) like `-moz-flex-shrink: 0;` – Shidersz Dec 06 '18 at 03:09