html - Flex children 在较小的屏幕上被切断

Question

在我下面的代码中，.content 具有 flex 属性，但在小屏幕上看起来被剪掉了。

我不想设置固定大小，因为文本会变得更大。

基本上，背景图片在大屏幕上应该全高，而右边的文本内容居中。

在小屏幕上，文本应该在最前面并且通常可见，而背景在它之后。

如何在较小的屏幕上解决这个问题，以便内容正常可见并在其后推送背景？这是示例 https://codepen.io/anon/pen/YEdjQb?editors=1100 (调整画面)

html, body, .wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

Answer 1

您需要修复 3 个主要问题:

• 将 wrapper 更改为最小高度(这里我使用了视口(viewport)单位)，以便它可以随内容增长并可以适当滚动

• 添加 height: 600px; (或你想要的高度)到 .background 小屏幕，否则它会在小屏幕上折叠，因为它不再像在更宽的屏幕上那样拉伸(stretch)以适应

• 在更宽的屏幕上添加(移动)flex: 1; 到 .background 以便 content/background 共享宽度相等

为什么需要 height: 600px; 用于较窄的屏幕，div 上的 background-image 不会调整大小它的元素就像 img 一样。

Updated codepen

堆栈片段

body {
  margin: 0;
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;              /*  changed  */
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  height: 600px;                  /*  added  */
  order: 2;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    height: auto;                 /*  added  */
    flex: 1;                      /*  moved  */
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>