灵活元素保持行为自动宽度（收缩与内容）是可能的？[重复]

Question

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  flex-basis: auto;
}

 <div class="container">
  <div class="first">full width</div>
  <div class="second">
  inline-block
  </div>

我不想"第二"div占用100%。我想保持它像"inline-block"的宽度应该延长，直到内容可用。

提前谢谢

Answer 1

将右边距：自动添加到。第二类。

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  flex-basis: auto;
  margin-right: auto;
}

<div class="container">
  <div class="first">full width</div>
  <div class="second">
  inline-block
  </div>

Answer 2

使用align self限制flexbox中的flex项目。

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  align-self: start;
}

<div class="container">
  <div class="first">full width</div>
  <div class="second">
    inline-block
  </div>
</div>