flexbox-如何包装到最长元素的宽度？

Question

为了更好地描述问题，这里是一幅价值一千个字的图片：

调整页面大小时，我想达到B-现在我有A。

.container {
  background: black;
}

.line1,
.line2,
.line3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px dotted pink;
  padding: 10px;
  background: yellow;
}

.one,
.two,
.three {
  padding: 10px;
  box-sizing: border-box;
  flex: 0 1 20%;
}

.one {
  background: red;
}

.two {
  background: blue;
}

.three {
  background: green;
}

<div class="container">
  <div class="line1">
    <div class="one">1111</div>
    <div class="two">22222222222</div>
    <div class="three">3333333</div>
  </div>
  <div class="line2">
    <div class="one">1111111111111111</div>
    <div class="two">2222</div>
    <div class="three">33</div>
  </div>
  <div class="line3">
    <div class="one">1</div>
    <div class="two">222222222222</div>
    <div class="three">333333333</div>
  </div>
</div>

https://jsfiddle.net/b8amyfog/-因此，当我调整大小时，我想要的是B，而不是A（图像）。该如何解决？

Answer 1

.container
{background:black;}

.line1, .line2, .line3
{display:flex;
flex-wrap: wrap;
align-items:center;
border-top:1px dotted pink;
padding:10px;
background:yellow;}

.one, .two, .three
{padding:10px;
box-sizing:border-box;
flex:1}

.one
{background:red;}

.two
{background:blue;}

.three
{background:green;}

.line1 div, .line2 div, .line3 div {
  word-break: break-all;
}

<div class="container">
   <div class="line1">
      <div class="one">1111</div>
      <div class="two">22222222222</div>
      <div class="three">3333333</div>
  </div>
  <div class="line2">
    <div class="one">1111111111111111</div>
    <div class="two">2222</div>
    <div class="three">33</div>
  </div>
  <div class="line3">
    <div class="one">1</div>
    <div class="two">222222222222</div>
    <div class="three">333333333</div>
  </div>
</div>