同等位置的div，当它们太多时溢出它们

Question

我有<div class="wrapper">，它内部的所有div都是平等相邻的。但是当我有太多的人时，他们彼此太接近了。所以当有多于4个div时，我想让滚动条出现。每个div至少需要25％的母公司。

我试图添加min-width: 25%内部包装的divs，但它没有奏效。

我该如何在CSS中做到这一点？

.wrapper { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
.wrapper div { 
 
    display: table-cell; 
 
}

<div style="position: absolute; background-color: #dedede; bottom: 5%; left: 5%; width: 90%"> 
 
    <p>text...</p> 
 
    <div class="wrapper"> 
 
    <div>Aaa</div> 
 
    <div>Aaa</div> 
 
    <div>Aaa</div> 
 
    <div>Aaa</div> 
 
    <div>Aaa</div> 
 
    <div>Aaa</div> 
 
    </div> 
 
</div>

Answer 1

可以使用弹性和柔性，基础设置对孩子的25％和overflow: auto父。

.wrapper { 
 
    display: flex; 
 
    overflow: auto; 
 
} 
 

 
.wrapper div { 
 
    flex: 0 0 25%; 
 
}

<div style="position: absolute; background-color: #dedede; bottom: 5%; left: 5%; width: 90%"> 
 
     <p>text...</p> 
 
     <div class="wrapper"> 
 
      <div> 
 
       Aaa 
 
      </div> 
 
      <div> 
 
       Aaa 
 
      </div> 
 
      <div> 
 
       Aaa 
 
      </div> 
 
      <div> 
 
       Aaa 
 
      </div> 
 
      <div> 
 
       Aaa 
 
      </div> 
 
      <div> 
 
       Aaa 
 
      </div> 
 
     </div> 
 
    </div>