Make div bigger then its parent [duplicate]

Question

is there any way how can I make div bigger then its parent? I know its bad practice. Basically I have div that is small and I need to create div inside which will be through entire window. But cant find way how to do it. Thanks for any help.

Answer 1

You need to "pop" that element from normal flow with position rule with specified dimensions. E.g. position: fixed;

.outer {
  width: 10vw;
  height: 10vh;
  position: relative;
  background: rgba(130, 130, 255, .3);
  border: 1px solid red;
}

.inner {
  width: 90vw;
  height: 90vh;
  position: absolute;
  left: 5px;
  top: 5px;
  background: rgba(130, 255, 130, .3);
  border: 1px solid green;
}

<div class="outer">
  <div class="inner"></div>
</div>

---

Alternative

Have overflow: visible with specified dimensions

.outer {
  width: 10vw;
  height: 10vh;
  position: relative;
  background: rgba(130, 130, 255, .3);
  border: 1px solid red;
  overflow: visible;
  display: inline-block;
  vertical-align: top;
}

.inner {
  width: 90vw;
  height: 90vh;
  margin: 5px;
  margin: 5px;
  background: rgba(130, 255, 130, .3);
  border: 1px solid green;
}

<div class="outer">
  <div class="inner"></div>
</div>