Question

我试图创造一个简单的＆＃34;应以内联方式显示的信息栏。

该栏由两个div组成，其中第一个包含所有必需的信息（并且始终可见），第二个在应用时显示信息消息。我创建了一支笔来演示here。

我的问题是上部div的内容并不总是相同的宽度，并且在某些情况下它会溢出（这是基于我的要求的有效行为，因为我总是希望它在一行中）。因此，当屏幕收缩得足够时，上部div溢出，但下面保持宽度与屏幕宽度相同，并且不遵循上部div的宽度。

我想要实现的是使下面的div具有与鞋面相同的宽度，即使上面的一个溢出。任何人的想法？

在此处添加代码以供参考：

HTML：

<h2> Shrink me to see than warning div is not the same width as the other one</h2>

<div id="TaskTimeBar">
  <div id='main-wrapper'>
    <div class="task-time-bar-content">
      <div id="time-cell">
        <div class='time-container'>
          <i class="fa fa-clock-o"></i>21:12
        </div>
      </div>
      <div id="active-task-bar-main-content">
        <div><i class="fa fa-link"></i> <a href="/show?table=TASK&amp;key=28125">#28125</a></div>
        <div><i class="fa fa-info"></i> This can be a long text...</div>
        <div><i class="fa fa-user"></i> <a href="/show?table=Customer&amp;key=1">Yo mama</a></div>
      </div>
      <div id="active-task-bar-buttons">
        <div class="active-bar-button-wrapper">
          <button>Stop</button>
        </div>
        <div class="active-bar-button-wrapper">
          <button>Switch To #28192</button>
        </div>
      </div>
    </div>
  </div>
  <div class="active-task-bar-information">This is an information message</div>
</div>

CSS：

#TaskTimeBar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#main-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.task-time-bar-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 5px;
}
#time-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-weight: bold;
  font-size: 22px;
}
.time-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.time-container i {
  padding-right: 5px;
}
#active-task-bar-main-content {
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-pack: space-around;
  -ms-flex-pack: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
}
#active-task-bar-main-content div {
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
#active-task-bar-buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 10px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}
.active-bar-button-wrapper {
  line-height: 28px;
  margin-right: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.active-task-bar-information {
  background-color: #ffa500;
  color: #f3ebf8;
  border: thin solid #808080;
  border-top: none;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

编辑：

让我根据评论中提到的div's ID进行更多解释。

我有一个#TaskTimeBar，其中包含两个div，#main-wrapper和#active-task-bar-information。要求如下：

#main-wrapper应始终在一行
#active-task-bar-information应始终与#main-wrapper具有相同的宽度，并位于其下方。

问题是，当屏幕变小时，#main-wrapper的内容会溢出并超出屏幕宽度，但#active-task-bar-information不会跟随。如果您在链接笔中使用窗口宽度，您将看到效果。

Answer 1

只是为了确保我做对了：

主包装永远不会真正包装它的内容，因此它会溢出。
active-task-bar-information 内容实际上已包含且永远不会超出视口。
主要包装的行为是正确的。
active-task-bar-information 行为不正确。它应该像它的兄弟#main-wrapper一样表现。

按照这些标准，我认为我得到了它。试试这个：

html { box-sizing: border-box; font: 16px/1.5 Consolas; }
body { width: 100%; min-width: 60em; height: auto; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#TaskTimeBar {

  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  -webkit-justify-content: stretch;
  -moz-justify-content: stretch;
  justify-content: stretch;

}
#main-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.task-time-bar-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 5px;
}
#time-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-weight: bold;
  font-size: 22px;
}
.time-container {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.time-container i {
  padding-right: 5px;
}
#active-task-bar-main-content {
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-pack: space-around;
  -ms-flex-pack: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
}
#active-task-bar-main-content div {
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
#active-task-bar-buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 10px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}
.active-bar-button-wrapper {
  line-height: 28px;
  margin-right: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.active-task-bar-information {
  background-color: #ffa500;
  color: #f3ebf8;
  border: thin solid #808080;
  border-top: none;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

为了获得更准确的结果，我将所有内容重置为边框大小调整，将所有边距，填充和边框归零。这是可选的。
我改变了父Flexbox（ TaskTimeBar ）内容的保存方式，因为 main-wrapper 和 active-task-bar-information 是兄弟姐妹。变化如下：

#TaskTimeBar {...
.....
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  -webkit-justify-content: stretch;
  -moz-justify-content: stretch;
  justify-content: stretch;
 }

TaskTimeBar （父级）拉伸其子级（主要包装和活动任务栏信息），由于justify属性stretch和flex-wrap属性nowrap而超出视口。作为旁注，活动任务栏信息总是比主包装短2px，直到我执行了重置，现在它们在任何大小的视口中测量相同的宽度（据我所知）。希望我能正确理解你的问题并给你适当的建议。

编辑：当我完成对[demo] [1]的请求时，我在所有三个div中添加了inline-flex。详细信息随演示提供。下面是截图，说明了两个div相等的宽度。

**active-task-bar-information** 2383.328125px **main-wrapper** 2383.328125px

Answer 2

在this fiddle我已经采用了@ zer00ne的代码，并尝试通过仅保留外部div为灵活方框来简化情况，而不是管理灵活方框的层次结构。我已将内部div与display: inline和white-space: nowrap保持一致。似乎达到了预期的效果。

Flexbox两行宽度相同，溢出

2 个答案: