How to let inline block div which overflow put on the previous line

Viewed 61

I want to do like this↓↓ enter image description here

but the demo is this↓↓ enter image description here

When these inline-block divs overflow one rows, they would not drop down next row and put one the previous line.

.store-card {
  width: 100%;
  border-bottom: 1px solid #ed6c4d;
}

.store-change {
  display: inline-block;
  border: 1px solid #ed6c4d;
  border-bottom: 0px;
  padding: 4px 25px;
  color: #ed6c4d;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  background-color: transparent;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.store-active {
  color: #fff;
  background-color: #ed6c4d;
}
<div class="store-card">
  <div class="store-change store-active">
    <span>豆豉鸭</span>
  </div>
  <div class="store-change">
    <span>卤肉</span>
  </div>
  <div class="store-change">
    <span>板栗鸡</span>
  </div>
  <div class="store-change">
    <span>麻婆豆腐啊</span>
  </div>
  <div class="store-change">
    <span>香菇炖鸡啊</span>
  </div>
  <div class="store-change">
    <span>可乐啊</span>
  </div>
  <div class="store-change">
    <span>紫苏酱香鸭啊</span>
  </div>
  <div class="store-change">
    <span>鲜肉馄饨啊</span>
  </div>
  <div class="store-change">
    <span>玉米蒸饺啊</span>
  </div>
  <div class="store-change">
    <span>凉拌青瓜啊</span>
  </div>
  <div class="store-change">
    <span>烧骨粥啊</span>
  </div>
</div>

I don't know how to change it. If only css more better.

Important: this div is dynamic data, is not static.

3 Answers
Related