Why the flex item have height?

I have the following code example scenario , and I know why content1 cannot scroll (because content_wrap1 does not have its own height,so that height:100% of content1 is not work) , But why can content2 scroll? does a flex item have its own height?

<template>
  <div class="wrap1">
    <div class="content_wrap1">
      <div class="content1">
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
    </div>
    </div>
  </div>

  <div class="wrap2">
    <div class="content_wrap2">
      <div class="content2">
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
      <div class="item">123</div>
    </div>
    </div>
  </div>
</template>
<style>
.wrap1{
  height: 100px;
  background-color: beige;
}
.content_wrap1{
  max-height: 100%;
  overflow: hidden;
}
.content1{
  height: 100%;
  overflow: auto;
}

.wrap2{
  margin-top: 50px;
  height: 100px;
  background-color: azure;
  display: flex;
  flex-direction: column;
}
.content_wrap2{
  overflow: hidden;
}
.content2{
  height: 100%;
  overflow: auto;
}
</style>

You need to sign in to view this answers

Related Post