html - 使内部 html 内容向下跳转而不是外部 html 内容

Question

我有一周中的几天和可以是任意数字的时间戳

当时间戳数量增加或我们缩小浏览器时，预期的行为是使时间戳像这样向下跳

但是，行为是这样的

这是我一天的简化 HTML 代码；星期一

<div class="form-group">
    <button class="btn btn-secondary days">
         Monday
         <span class="sprite-1-arrow-black-right"></span>
     </button>
     <div class="timestamps">
         <div class="timestamp">
             00:00 am - 00:00 pm
          </div>
          <div class="timestamp">
            00:00 am - 00:00 pm
           </div>
     </div>
 </div>

在简化的 css/sass 中

.days {
        display: inline-block;
}
.timestamps {
       display:inline-block;
}
.timestamp {
       display: inline-block;
}

我认为，应该有灵活的解决方案，但我不知道如何!

Answer 1

将所有东西包裹在一个 flex 容器中。默认情况下，它将具有 flex-wrap: nowrap。

然后将时间戳包装在嵌套的 flex 容器中。给这个容器flex-wrap:wrap。

现在主容器不会换行，但时间戳元素将会换行。

.form-group {
  display: flex;
}

.timestamps {
  display: flex;
  flex-wrap: wrap;
}

button {
  align-self: flex-start; /* override `stretch` default */
}

.timestamp {
  white-space: nowrap;    /* prevent text nodes from wrapping */
}

<div class="form-group">
  <button class="btn btn-secondary days">
    Monday
    <span class="sprite-1-arrow-black-right"></span>
  </button>
  <div class="timestamps">
    <div class="timestamp">00:00 am - 00:00 pm</div>
    <div class="timestamp">00:00 am - 00:00 pm</div>
  </div>
</div>

jsFiddle demo