没有内联的Flexbox容器适合内容

Question

我有以下jsfiddle：https://jsfiddle.net/CLight/5tm168uk/

正如你所看到的，中间有很多浪费的空间。 如何在不破坏递归结构的情况下，根据内容整齐地收缩容器怎么样？我尝试使用浮动解决这个问题，但是我被困了几个小时试图处理宽度。

编辑：为了澄清，我试图让它看起来像这样：

＆＃13;

＆＃13;

div {
  border: 1px solid;
}

.container {
  display: flex;
}

.box {
  flex: 1;
}

.left {
  text-align: left;
  padding-left: 20px;
}

.right {
  text-align: right;
  padding-right: 20px;
}

.recursive {
  padding: 0% 5%;
}

＆＃13;

<div class="container">
  <div class="box left">
    2314
  </div>
  <div class="box right">
    55453
  </div>
</div>

<div class="container">
  <div class="box recursive">
    <div class="container">
      <div class="box left">
        3453535345353535
      </div>
      <div class="box right">
        3534535
      </div>
    </div>
    <div class="container">
      <div class="box recursive">
      <div class="container">
          <div class="box left">
            3453
          </div>
          <div class="box right">
            3
          </div>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="box left">
    4535
  </div>
  <div class="box right">
    3
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通常，内联包装器可以解决这些问题，其中项目的大小取决于其内容。

在这种情况下，使用列方向的内联flex容器会修复。

Stack snippet

.wrapper {
  display: inline-flex;
  flex-direction: column;
}

div {
  border: 1px solid black;
}

.container {
  display: flex
}

.box {
  flex: 1
}

.left {
  text-align: left;
  padding-left: 20px
}

.right {
  text-align: right;
  padding-right: 20px
}

.recursive {
  padding: 0 5vw
}

<div class="wrapper">
  <div class="container">
    <div class="box left">
      2314
    </div>
    <div class="box right">
      55453
    </div>
  </div>

  <div class="container">
    <div class="box recursive">
      <div class="container">
        <div class="box left">
          3453535345353535
        </div>
        <div class="box right">
          3534535
        </div>
      </div>
      <div class="container">
        <div class="box recursive">
          <div class="container">
            <div class="box left">
              3453
            </div>
            <div class="box right">
              3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box left">
      4535
    </div>
    <div class="box right">
      3
    </div>
  </div>
</div>

为了平衡它，最小宽度可能会有所帮助。

Stack snippet

.wrapper {
  display: inline-flex;
  flex-direction: column;
  min-width: 450px;
}

div {
  border: 1px solid black;
}

.container {
  display: flex
}

.box {
  flex: 1
}

.left {
  text-align: left;
  padding-left: 20px
}

.right {
  text-align: right;
  padding-right: 20px
}

.recursive {
  padding: 0 5vw
}

<div class="wrapper">
  <div class="container">
    <div class="box left">
      2314
    </div>
    <div class="box right">
      55453
    </div>
  </div>

  <div class="container">
    <div class="box recursive">
      <div class="container">
        <div class="box left">
          3453535345353535
        </div>
        <div class="box right">
          3534535
        </div>
      </div>
      <div class="container">
        <div class="box recursive">
          <div class="container">
            <div class="box left">
              3453
            </div>
            <div class="box right">
              3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box left">
      4535
    </div>
    <div class="box right">
      3
    </div>
  </div>
</div>

Answer 2

看看队友。您需要为所有元素包装一个div，以便您可以轻松处理。 我试过这里

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

.wrapper {
  height: 100%;
  display: flex;
  width: 100%;
}

div {
  border: 1px solid black;

}

.container{
  display:flex;
  width: 100%;
  height: 33.333%;
}

.box{
  flex:1
}

.left{
  text-align: left;
  padding-left: 20px
}

.right{
  text-align: right;
  padding-right: 20px
}


.recursive{
  padding: 0% 5%
}

<div class="wrapper">
  <div class="container">
    <div class="box left">
      2314
    </div>
    <div class="box right">
      55453
    </div>
  </div>

  <div class="container">
    <div class="box recursive">
      <div class="container">
        <div class="box left">
          3453535345353535
        </div>
        <div class="box right">
          3534535
        </div>
      </div>
      <div class="container">
        <div class="box recursive">
        <div class="container">
            <div class="box left">
              3453
            </div>
            <div class="box right">
              3
            </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box left">
      4535
    </div>
    <div class="box right">
      3
    </div>
  </div>
</div>

fiddle

Answer 3

使用bootstrap：

的CSS：

 div {
      border: 1px solid black;
      margin: auto;
    }

HTML：

 <div class="row">
  <div class=" col-md-6">
    2314
  </div>
  <div class="col-md-6">
    55453
  </div>
  <div class="col-md-10">
    <div class="row">
      <div class="col-md-6">
        3453535345353535
      </div>
      <div class="col-md-6">
        3534535
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        3453
      </div>
      <div class="col-md-6">
        3
      </div>
    </div>
  </div>

  <div class="col-md-6">
    4535
  </div>
  <div class="col-md-6">
    3
  </div>
</div>

https://jsfiddle.net/5tm168uk/8/