如何使垂直对齐的孩子之一缩小到其他孩子设置的宽度？

Question

问题

有一个内联容器，其中包含 2 个垂直堆叠的子容器。如下图：

顶部的绿色子项应将其宽度缩小到底部橙色子项的宽度，将文本包裹在自身内部。所需的布局如下图所示：

问题：如何单独使用 CSS 完成？

其他情况

橙色容器比绿色容器宽（下图）。绿色保持在它的自然最大宽度。请注意，即使解决方案将绿色框拉伸到 100%，通过为绿色框添加一个额外的容器然后将绿色框居中居中，实现目标解决方案也很容易。

橙色框比父级的最大可能宽度更宽（下图）。橙色应该开始包裹。

注意事项

• 子项的内容是动态的 - 解决方案需要使用可变宽度的子项。
• 父级是内联的 - 它的宽度不是 100%，而是它最宽的子级的宽度。
• 浏览器支持并不重要。解决方案甚至可以使用 CSS Grid。

代码

小提琴

http://jsfiddle.net/twfky2cr/24/

HTML

<div class="container">
  <div class="fitChild">
    Some long text that I would like to wrap to fit the container size
    set by the orange box
  </div>
  <div class="fullWidthChild">
    This one should set the container size
  </div>
</div>

CSS

.container {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  background-color: black;
}

.container,
.fitChild,
.fullWidthChild {
  padding: 10px;
}

.fitChild {
  color: white;
  background-color: green;;
}

.fullWidthChild {
  margin-top: 10px;
  background-color: orange;
}

Answer 1

我有一个部分解决方案。

http://jsfiddle.net/twfky2cr/166/

我将display: table 和width:1px 用于单元格。

<div class="table">
  <div class="row">
    <span class="cell wrap">
      Some long text that I would like to wrap to fit the container size
    </span>
  </div>
  <div class="row">
    <span class="cell nowrap">
      This one should set the container size
    </span>
  </div>
</div>

.table {
  background-color: Black;
  display: table;
  padding: 1rem;
}

.row {
  display: table-row;
}

.cell {
  padding: 1rem;
  display: table-cell;
  width: 1px;
}

.wrap {
  color: white;
  background-color: Green;
  white-space: wrap;
}

.nowrap {
  background-color: Orange;
  white-space: nowrap;
}    

Answer 2

在这里查看这个小提琴http://jsfiddle.net/kjr9aghp/

$(document).ready(function() {

    $('.fitChild').width($('.fullWidthChild').width());

});

Answer 3

 .container {
   display: inline-flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
   background-color: black;
 }

 .container,
 .fitChild,
 .fullWidthChild {
   padding: 10px;
   width: 100% !important;
 }

 .mainwrapper{
   max-width:50%;
 }

.fitChild {
  color: white;
  background-color: green;;
}

.fullWidthChild {
  margin-top: 10px;
  background-color: orange;
}



<div class="container">
  <div class="mainwrapper">
    <div class="fitChild">
      Some long text that I would like to wrap to fit
      the container size set by the orange box
    </div>
    <div class="fullWidthChild">
      This one should set the container size
    </div>
  </div>
</div>