I have a HTML dialog element .parent containing an inner div .child. The parent has height: fit-content while the child has height: 100%. In other browsers, the height of the elements are computed as some nonzero value fitting the content of .child. However, in Safari, .child's height is being computed as 0. What's going on here?

In this snippet, I've colored .child's background green. I expect the green to be visible,indicating nonzero height.

.parent {
  height: fit-content;
}

.child {
  height: 100%;
  background-color: lightgreen;
}

<dialog open class="parent">
  <div class="child">
    Content
   </div>
</dialog>

I have a HTML dialog element .parent containing an inner div .child. The parent has height: fit-content while the child has height: 100%. In other browsers, the height of the elements are computed as some nonzero value fitting the content of .child. However, in Safari, .child's height is being computed as 0. What's going on here?

In this snippet, I've colored .child's background green. I expect the green to be visible,indicating nonzero height.

.parent {
  height: fit-content;
}

.child {
  height: 100%;
  background-color: lightgreen;
}

<dialog open class="parent">
  <div class="child">
    Content
   </div>
</dialog>

• html
• css
• safari

Share Improve this question Follow edited Nov 15, 2024 at 19:53 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Nov 15, 2024 at 19:43 tau_tau_ 2333 bronze badges 1

• 1 Did you figure this out? I have been also struggling with this in safari. If I don't specify a height in the dialog element, safari treats it as 0, while in the other browsers it will fit the content. If I set height: auto, it kind of works but still doesn't fit all the content as expected but at least it shows some height. – Carlos Sosa Commented Nov 17, 2024 at 16:35

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I was also struggling with this issue, if instead of height: 100% on the child element, use min-height: 100% that should work.

.parent {
  height: fit-content;
}

.child {
  min-height: 100%;
  background-color: lightgreen;
}

<dialog open class="parent">
  <div class="child">
    Content
   </div>
</dialog>