html - Flexbox适合 child 的宽度

Question

我有以下 flexbox。我怎样才能让这个 flexbox 适合 child 的数量？有 3 个 child 的第一个片段很好。但如果只有一个 child ，我希望 flexbox 将其大小减小到 child 的宽度 + 填充。换句话说，当只有一个 child 时，我不想要右侧的空白和背景(参见第二个片段， child 应保持大小)。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-right: 10vw;
  padding-bottom: 10vw;
  height: 100%;
  max-width: 80%;
  background-color: #F8F8F8;
}

.wrapper div {
   flex: 1;    
   min-width: 50%;
   margin-top: 10vw;
   padding-left: 10vw;
   box-sizing: border-box;
   flex-grow: 0;
}

<div class="wrapper">

  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-right: 10vw;
  padding-bottom: 10vw;
  height: 100%;
  max-width: 80%;
  background-color: #F8F8F8;
}

.wrapper div {
   flex: 1;    
   min-width: 50%;
   margin-top: 10vw;
   padding-left: 10vw;
   box-sizing: border-box;
   flex-grow: 0;
}

<div class="wrapper">

  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  </div>
  
</div>

Answer 1

给文本 div 赋予 background-color 的问题的唯一解决方案。否则，它不会工作。此外，当您使用 ** vw ** 进行填充时，它会使包装器无法正常工作。所以我建议你将文本放在一个div中，并在文本的父div中进行一些更改。这是我所做的。

    <div class="wrapper">
      <div class="text-box">
        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua
        </div>
      </div>
      <div class="text-box">
        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua
        </div>
      </div>
      <div class="text-box">
        <div class="text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua
        </div>
      </div>
    </div>

.wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 80px;
      height: 100%;
      width: inherit;
    }

    .wrapper .text-box {
      flex: 1;
      flex-basis: 50%;
      min-width: 50%;
      padding: 80px;
      margin: 0;
      box-sizing: border-box;
      flex-grow: 0;
      background-color: #f8f8f8;
    }