根据左div设置右div的宽度

Question

我有一个标记，其中有一个容器，可以说宽度为100％，并且在该容器中有两个子元素。第一个子级的宽度基于此div内的文本，然后下一个div的宽度应为（容器宽度的宽度）-（第一个子元素）。

有关说明，请参见下图：

在这种情况下，白框的宽度为100％，其宽度基于其文本内容。绿色div应该具有（白框的宽度）-（红框的宽度）。

如何在CSS中设置绿色宽度？到目前为止，这是我尝试过的：

.ContentItemMenu {
  width: 100%;
  height: 50px;
  /* background-color: bisque; */
  border-bottom: 1px solid #c3c3c3;
}

.ContentTitle {
  width: auto;
  padding: 0 20px;
  height: 100%;
  float: left;
  font-size: 25px;
  font-family: opensansBold;
  text-align: left;
  line-height: 50px;
  background-color: #5144F0;
}

.SubContentTabs {
  width: 100%;
  height: 100%;
  float: left;
  background-color: aquamarine;
}

<div class="ContentItemMenu">
  <div class="ContentTitle">Some text</div>
  <div class="SubContentTabs"></div>
</div>

我是CSS的新手，所以如果需要更多说明，请告诉我。

Answer 1

使用弹性盒-将display: flex添加到ContentItemMenu并将flex: 1设置为SubContentTabs-请参见下面的演示

.ContentItemMenu {
  display: flex; /* ADDED */
  width: 100%;
  height: 50px;
  /* background-color: bisque; */
  border-bottom: 1px solid #c3c3c3;
}

.ContentTitle {
  width: auto;
  padding: 0 20px;
  height: 100%;
  float: left;
  font-size: 25px;
  font-family: opensansBold;
  text-align: left;
  line-height: 50px;
  background-color: #5144F0;
}

.SubContentTabs {
  width: 100%;
  height: 100%;
  float: left;
  background-color: aquamarine;
  flex: 1; /* ADDED */
}

<div class="ContentItemMenu">
  <div class="ContentTitle">Some text</div>
  <div class="SubContentTabs"></div>
</div>
<br/>
<div class="ContentItemMenu">
  <div class="ContentTitle">Some text here, this is a long text</div>
  <div class="SubContentTabs"></div>
</div>