html - 줄바꿈 - w3school flex



Flexbox 크기 조절 및 스크롤 오버 플로우 (1)

크기를 조정하는 콘텐츠가 있으며 크기를 조정할 수없고 스크롤 가능한 콘텐츠의 일부가 아닌 고정 된 제목이 필요합니다. 공간이 충분하지 않으면 아래 내용이 스크롤 가능하게됩니다.

내용 외부 래퍼 ( flexGrowWrapper )에는 flex-grow: 1 있고 내부 래퍼에는 height: 100%; overflow-y: auto height: 100%; overflow-y: auto . 여기에서 생각한 과정은 flexGrowWrapperresize div 내의 나머지 공간을 채울 것이고 내부 래퍼는 flexGrowWrapper 의 전체 높이를 취하고 오버 플로우가 있으면 스크롤해야한다는 것입니다.

flexGrowWrapperresize 영역을 채우기 위해 flexGrowWrapper 는하지만, 내용이 최소 높이를 지정하는 것으로 보입니다.

flexGrowWrapperresize 영역의 높이를 flexGrowWrapper 않게 resize 어떻게해야합니까?

$("button").click(function() {
	$(".resize").toggleClass("small");
});
.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}
<button>
Resize
</button>
<div class="resize">
  <div class="heading">
  <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
 Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

참고 : 이 비슷한 질문 을 보았지만 약간의 차이점이있는 것 같았고 솔루션을 얻을 수 없었습니다.


.flexGrowWrapper min-height: 0 을 추가하십시오 - 아래의 데모를 참조하십시오 :

$("button").click(function() {
  $(".resize").toggleClass("small");
});
.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
  min-height: 0; /* ADDED */
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}
<button>
Resize
</button>
<div class="resize">
  <div class="heading">
    <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
  Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

이것이 작동하는 이유

이것은 열 플렉스 박스의 경우 기본 min-height 값이 auto ( 플렉스 축을 따라)이기 때문입니다. 아래에서이 동작의 몇 가지 예를 볼 수 있습니다.





flexbox