입문

CSS의 필수 속성height 및width.
편리하지만 넓이와 높이를 고정하고 싶지 않은 경우(내부 요소의 내용에 따라 넓이와 높이를 유연하게 바꾸고 싶은 경우)는 불편하다.
그럼에도 불구하고 폭과 높이를 전혀 지정하지 않으면 생각보다 크기가 작고 커지는 등 문제가 생길 수 있다.
그때 편한 건요.
max-height,min-height,max-width,min-width!
보시다시피 height과width의 전방은 max-과min-만 더하면 기억하기 쉽습니다.
전방에 max- 또는 min- 장착
선택기의 크기는 고정되지 않지만 크기에 대한 최대값 또는 최소값을 설정할 수 있습니다.

사용 방법

단위는 px,% 또는rem로 설정할 수 있습니다.
이것은 일반적인 하이트와 와이드와 같습니다!
그리고 설정한 방법은 다음과 같다.
테스트 1류~테스트 4류는 각각 max-height,min-height,max-width,min-width를 설치했다.
test.html

<div class = "container">
  <div class = "test1">
    高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。高さの最大値を指定。
  </div>
  <div class = "test2">
    高さの最低値を指定。
  </div>
  <div class = "test3">
    幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。幅の最大値を指定。
  </div>
  <div class = "test4">
    幅の最低値を指定。
  </div>
</div>

test.css

.container {
  display: flex;
}
.test1 {
  width: 100px;
  max-height: 300px;
  background-color: yellow;
  margin-right: 20px;
 }
 .test2 {
  width: 100px;
  min-height: 300px;
  background-color: skyblue;
  margin-right: 20px;
 }
 .test3 {
  height: 100px;
  max-width: 300px;
  background-color: salmon;
  margin-right: 20px;
 }
 .test4 {
  height: 100px;
  min-width: 200px;
  background-color: lightgreen;
  margin-right: 20px;
 }

그리고 각자의 결과는 이쪽!
max-, 클래스의 원소와 상관없이div 원소 자체의 너비나 높이는 설정된 최대값으로 표시됩니다.min-, 클래스의 원소가 적더라도 div 원소 자체의 너비나 높이는 설정된 최소값으로 표시됩니다.

마지막

잘 활용하면 편리한 기능!
끝까지 봐주셔서 감사합니다!