I have a width of 200px and a height of 100px. I can be resized horizontally.
I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction.
.box { writing-mode: horizontal-tb; } .physical { width: 200px; height: 100px; resize: horizontal; } .logical { inline-size: 200px; block-size: 100px; resize: inline; }
<div class="container"> <div class="physical box"> I have a width of 200px and a height of 100px. I can be resized horizontally. </div> <div class="logical box"> I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction. </div> </div>