CSS-Course-Code/block-inline-size.html at main · yoo-baba/CSS-Course-Code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Inline-size</title>
  <style>
    #box{
      background: pink;
      border: 3px solid #000;
      box-sizing: border-box;
      padding: 15px;
      min-inline-size: 200px;
      max-inline-size: 400px;
      /* writing-mode: vertical-rl; */
    }
  </style>
</head>

<body>
  <h1>CSS Inline-size</h1>

  <div id="box">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, impedit laborum deserunt dicta debitis ullam incidunt, dolorum, mollitia iure veritatis nisi qui aperiam? Nobis, ratione. Tenetur iste neque aliquam reprehenderit, numquam autem libero nemo dignissimos fuga esse odio culpa consequatur, nam veniam unde alias doloribus explicabo ea impedit? Vel, quaerat, soluta asperiores ex tenetur tempora quibusdam architecto sit eius expedita labore magnam aut libero amet harum alias? Fuga obcaecati architecto molestias consectetur eaque maiores excepturi ducimus id vero tempora repellat impedit voluptatum facere, reiciendis eum quisquam sapiente saepe accusantium. Exercitationem eveniet aperiam voluptate ex. Cum voluptatum, fugit cupiditate eveniet quibusdam amet laudantium quia vero natus? Quo aliquam tempore voluptate dolorum accusamus, sequi libero aperiam molestiae quod explicabo corporis doloribus nobis mollitia consectetur earum. Optio libero deleniti quo, minima, aliquid modi repellat cumque labore consequuntur aspernatur maxime dolores animi cum, ipsa adipisci nihil? Id tenetur sequi eligendi? Ad libero aperiam totam.
  </div>
</body>
</html>