<div >
<embed src="/images/food.jpg">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, aperiam accusantium doloremque nobis libero beatae! Ipsum, deleniti minus, velit accusantium necessitatibus dolore, corporis adipisci obcaecati sapiente illum facere est voluptas?riam accusantium doloremque nobis libero beatae! Ipsum, deleniti minus, velit accusantium necessitatibus dolore, corporis adipisci o</p>
</div>

.child{
    border: 2px solid black;
    height: min-content;
    /* width: min-content; */
    background-color: azure;
}

I am trying to understand min and max content but when i use min-content in width i got it that how min and max-content works in width but i can't understand how to behave min-content in height

CodePudding user response：

To make it easy, it does have an effect when you have a top/bottom writing mode (in contrast to a left/right one)

p {
  border: 2px solid black;
  background-color: azure;
  writing-mode: tb;
}

<p style="height: max-content;">長久命の長助。五劫の擦り切れ、水行末 雲来末 
</p>

<p style="height: min-content;">長久命の長助。五劫の擦り切れ、水行末 雲来末 
</p>

And in the above case you will notice that min-content/max-content will have no effect applied to wdith