Html 当高度降低时，有没有办法扩大容器div的宽度？

我需要创建一个只使用HTML和CSS（无js）的多栏工具栏 我有以下html结构：

<ul class="toolbar">
   <li><a class="tool">t1</a></li>
   <li><a class="tool">t2</a></li>
   <li><a class="tool">t3</a></li>
   <li><a class="tool">t4</a></li>
   <li><a class="tool">t5</a></li>
  <li><a class="tool">t6</a></li>
  <li><a class="tool">t7</a></li>
  <li><a class="tool">t8</a></li>
  <li><a class="tool">t9</a></li>
</ul

目前，我为.toolbar设置了一个固定宽度40px。当此宽度为80px时，工具栏将变为2列

我想从.toolbar div.中删除此固定宽度40px，并需要使其支持多列。当窗口高度降低时，我还需要将工具包装到多个列中。不同刀具长度的工具栏顺序如下：

3列：

.toolbar{
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
  width:40px
}
.toolbar li{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  float:left;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

1 2 3

4 5 6

7 8 9

101112

2列：

.toolbar{
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
  width:40px
}
.toolbar li{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  float:left;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

1 2

34

5.6

7 8

1列：

.toolbar{
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
  width:40px
}
.toolbar li{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  float:left;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

一,

二,

三,

四,

五,

我需要一个纯CSS解决方案。有人能帮忙吗

请参阅上的Ajinesravi（）笔。

尝试此代码

   html,body{
 height:100%;
}
.toolbar{
  display: flex;
  flex-direction: column;
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
min-width:40px;
}
a{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

试试这个代码

   html,body{
 height:100%;
}
.toolbar{
  display: flex;
  flex-direction: column;
  box-sizing:border-box;
  display:inline-block;
  height:100%;
  margin:0;
  padding:0;
min-width:40px;
}
a{
  background-color:grey;
  border:1px solid #fff;
  display:block;
  line-height:40px;
  list-style-type:none; 
  text-align:center;
  width:38px; 
}

---

因此，是否希望内容定义列大小，是否希望具有最大宽度和/或最小宽度。是的，我希望根据屏幕高度将工具包装到多个列。而且还需要保持水平的秩序。如果有两列，第二个工具应该在第一个工具的右侧渲染。没有最大宽度。。最小宽度为1刀具宽度（40px）。列数应根据屏幕高度和呈现的工具数确定。因此，是否希望内容定义列大小，是否希望具有最大宽度和/或最小宽度。是的，我希望根据屏幕高度将工具包装为多个列。而且还需要保持水平的秩序。如果有两列，第二个工具应该在第一个工具的右侧渲染。没有最大宽度。。最小宽度为1刀具宽度（40px）。列数应根据屏幕高度和呈现的工具数而定。如果工具数少于一列，则应为单列。抱歉，调整窗口大小时，它不会换行到下一列。同样，顺序应该从左到右，就像两列：t1和t2在第一行，如果是两列，t3和t4在第二行，如果三列：t1、t2和t3在第一列，t4、t5和t6在第二列，这就是你想要的方式？垂直列..正确吗？如果工具数量较少，无法容纳在单个列中，则应在单个列中。抱歉，在调整窗口大小时，它没有换行到下一列。同样，顺序应该从左到右，就像两列：t1和t2在第一行，如果是两列，t3和t4在第二行，如果三列：t1、t2和t3在第一列，t4、t5和t6在第二列，这就是你想要的方式？垂直柱..正确吗？