Flexbox列拉伸以适应内容

Question

各位开发者，大家好：

我想创建一个容器，让内容可以从上到下、从左到右展示。父容器需要根据最大定义值进行拉伸适应。

我已经尝试使用 flexbox 达到这个目的，但是我没有让父容器拉伸适应成功。有没有什么建议，能够不用通过 JavaScript 计算宽度就解决这个问题呢？

.flex-container {
  display: inline-flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 300px;
  max-width: 1000px;
  background-color: #333;
}


.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
</div>

- HemlockDevelopment

---

你期望什么？希望所有内容都有灰色背景吗？ - mickaelw

是的，我希望父容器能够覆盖所有项目，但不要延伸到最大值。 - HemlockDevelopment

Answer 1

你真的需要外部内联容器吗？我建议采用以下方法：

.flex-container {
  display: flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;    
  flex-flow: column wrap;
 
  max-height: 300px;
  max-width: 1000px;      
  background-color: #333;
}

.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<!-- <div class="flex-container"> -->
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
<!-- </div> -->

- Roman Koliada

---

也许不是这样，但我在使用此修复程序时遇到的问题是，父容器总是变成1000像素，并且不会按比例缩放以适应内容。另外，内容会分散到父级上，而不是与“左上角”对齐。 - HemlockDevelopment