1105268-1-min-max-dimensions.html (992B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .wrapper { 7 display: inline-block; 8 vertical-align: top; 9 margin: 20px; 10 } 11 .outer { 12 height: 250px; 13 width: 200px; 14 border: 10px solid #ddd; 15 } 16 .inner { 17 font: 12px monospace; 18 background: yellow; 19 overflow: hidden; 20 } 21 .test1 { 22 min-width: 180px; 23 max-width: 180px; 24 min-height: 150px; 25 max-height: 150px; 26 } 27 .test2 { 28 min-width: 150px; 29 max-width: 150px; 30 min-height: 200px; 31 max-height: 200px; 32 } 33 .lr { 34 writing-mode: vertical-lr; 35 } 36 </style> 37 38 </head> 39 40 <body> 41 42 <div class="wrapper"> 43 <div class="outer"> 44 <div class="inner test1 lr"> 45 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 </div> 47 </div> 48 </div> 49 50 <br> 51 52 <div class="wrapper"> 53 <div class="outer"> 54 <div class="inner test2 lr"> 55 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 56 </div> 57 </div> 58 </div> 59 60 </body> 61 </html>