2

I have div that contains flexbox element with iframe inside (made to be responsive using CSS).

In Firefox that parent's height is 0 for some reason. 

.container {
  border: 2px black solid;
}
.flexbox {
  max-width: 854px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background: yellow
}
.flexbox div {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
flexbox div span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}
<div class="container">
<div class="flexbox">
<div>
<span>
  TExT
</span></div>
</div>
</div>

The best way to see this please look at my example on JSFiddle: https://jsfiddle.net/5jLqugy6/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Filip Witkowski
  • 795
  • 3
  • 14
  • 24
  • What iframe? Your code doesn't include one. – TylerH May 10 '18 at 16:18
  • 1
    Because percentage padding fails in a flex container in FF and Edge. However, the spec has recently been updated, so your code may work in upcoming versions. See the duplicate for full details. – Michael Benjamin May 10 '18 at 17:31
  • How is this a duplicate of that other, barely-related CSS question? I would like an answer to this question. @Michael_B why did you mark this as duplicate? – Andrew Koster May 03 '19 at 20:50
  • If you take the time to read the answers in the duplicate, you'll see why. @AndrewKoster – Michael Benjamin May 07 '19 at 01:14
  • Both problems are caused by browsers interpreting CSS sizing specs in ways that make (for practical purposes) no sense. If I wanted a box to have a height of zero, I would give it one of these heights: "0", "0px", or "0%". It's really weird that the default behavior of browsers is, in some cases, to convert a nonzero number to zero. – Andrew Koster May 07 '19 at 21:36
  • Still don't see how the two problems are the exact same problem, though. It's confusing to lump them together. – Andrew Koster May 07 '19 at 21:37

1 Answers1

-1

I believe its because you have not set the height of the parent container or the child element within the parent.

SOUPaLOOP
  • 121
  • 7