Question

我正在尝试创建一个Flexbox，在其2个孩子中平均分配空间。我遇到的问题是，在我最小化屏幕后，第一个孩子的内容变得隐藏。

我希望info-section div的内容始终可见，但要缩小map-section div并显示滚动条。

<div class="contact-container">
  <div class="info-section">
    ... some content (info-section is also a flexbox)
  </div>
  <div class="map-section"></div>
</div>

Answer 1

将overflow: auto;提交给.info-section 试试这段代码：

＆＃13;

html, body {
  height: 100%;
}
.contact-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}
.contact-container .info-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow: auto;
}
.contact-container .info-section .social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  margin-top: var(--padding-large);
}
.contact-container .map-section {
  background-color: blue;
  height: 200px;
  flex: 1;
}

＆＃13;

<div class="contact-container">
  <div class="info-section">
    <div class="heading">Heading</div>
    <div class="content">
      <p>Lorizzle ipsum dolizzle stuff amizzle, shizznit adipiscing elit. Nullizzle sapien velizzle, mofo volutpizzle, suscipit quis, gravida bizzle.</p>
    </div>
    <div class="social">
      <img src="https://image.flaticon.com/teams/slug/smashicons.jpg" width="40px">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" width="40px">
      <img src="http://freedesignfile.com/upload/2017/04/Summer-holiday-vector-icon.jpg" width="40px">
      <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" width="40px">
    </div>
  </div>
  <div class="map-section">
  </div>
</div>

＆＃13;

Answer 2

只需将min-height: 300px;添加到.info-section即可。这将迫使容器始终具有至少300px的高度。如果它比那个大，它会滚动。

完整的CSS代码：

html, body {
  height: 100%;
}

.contact-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;

  .info-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 300px;
    .social {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 1em;
      margin-top: var(--padding-large);
    }
  }

  .map-section {
    background-color: blue;
    min-height: 200px;
    flex: 1;
  }
}

Answer 3

问题是将flex设置为1，这相当于将其设置为1 1 0。当时我不熟悉flex-grow，flex-shrink和flex-basis CSS属性，这就是我无法使其工作的原因。

将info-section 1 0 auto设置为{{1}}后，它不再缩小，其初始大小等于其内容的大小。

工作示例flex。

Flex项目缩小并隐藏其内容

3 个答案: