最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

html - Safari handles fit-content dialogs wrapping height: 100% as having no height - Stack Overflow

matteradmin7PV0评论

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>

Share Improve this question edited Nov 15, 2024 at 19:53 j08691 208k32 gold badges269 silver badges280 bronze badges asked Nov 15, 2024 at 19:43 tau_tau_ 233 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

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>

Post a comment

comment list (0)

  1. No comments so far