Flexbox width being exceeded

Asked

Viewed 68 times

2

I have a flexbox page, but one of the items I need to stay fixed at the bottom of the page and have the same width as the other items, but it exceeds the standard width.

html, body {width: 100%;height: 100%}
.pagina {display: flex;flex-direction: column;background: #ccc;width: 80%;height: 100%;margin: 0 auto;position: relative}
.bloco1 {background: green}
.bloco2 {background: pink;position: fixed;bottom: 0;width: 100%}
<div class="pagina">
  <div class="bloco1">Bloco 1</div>
  <div class="bloco2">Bloco 2 - Esse é fixo no final da página</div>
</div>

html css

  • You need the element to be at the bottom of the page all the time, even if you have a lot of content at scroll time that element should remain in the same place without scrolling with the page?

2 answers

2

Here I used the width: inherit the attribute inherit inherits the width of the parent element, thus not allowing the one child element to surpass the parent element..

html, body {width: 100%;height: 100%}
.pagina {display: flex;flex-direction: column;background: #ccc;width: 80%;height: 100%;margin: 0 auto;position: relative}
.bloco1 {background: green}
.bloco2 {background: pink;position: fixed;bottom: 0;width: inherit;}
<div class="pagina">
  <div class="bloco1">Bloco 1</div>
  <div class="bloco2">Bloco 2 - Esse é fixo no final da página</div>
</div>

2


You are expecting the div "block 2" to be the same size in your Parent, the div "page".

Turns out when using the display: fixed, the size of the element in question behaves in relation to the viewport, and not his Parent, so he doesn’t get the same width.

As your Rent has width: 80%, you need to use the same width so that it stays the same size, instead of the width: 100% that he currently has, or use inherit to force you to inherit from Parent:

html, body {width: 100%;height: 100%}
.pagina {display: flex;flex-direction: column;background: #ccc;width: 80%;height: 100%;margin: 0 auto;position: relative}
.bloco1 {background: green}
.bloco2 {background: pink;position: fixed;bottom: 0;width: 80%}
<div class="pagina">
  <div class="bloco1">Bloco 1</div>
  <div class="bloco2">Bloco 2 - Esse é fixo no final da página</div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.