动态地将ul从水平变为垂直

Question

也许是一个重复的问题，但我没有找到解决这个问题的任何方法......

我有一个div元素（我们称之为master）并且无法控制它。
所以，我不能修改它的宽度或高度。

在其内部，我有另一个div（让我们称之为container），我可以控制它。
在div内，我有3个ul元素，每个元素都有240像素。

我希望：

如果master小于720px（每个ul的240px乘以ul's的数量），我想垂直显示ul个元素（一个在顶部而另一个） 但是如果master超过720px，我想要水平显示ul元素（并排）。

除此之外，我希望我的container元素的最小宽度可以适合ul个孩子。

这是否可以仅使用 css / html？

我已经尝试过使用flex，float和table而没有成功...
我让this fiddle来帮忙。

说明我的意愿：

灰色框是master元素 红色的是container 绿色的是ul元素。

Answer 1

更新了小提琴：https://jsfiddle.net/qywozaa8/2/。

您可以将float:left用于ul元素 此外，您还必须使用宽度进行填充（将填充量减少230px，填充为5px） 还将容器overflow:auto更改为overflow-y: auto。

希望这有帮助。

更新了css：

div.master {
  background-color: gray;
  width: 720px;  /* I have no control over this. But this value can different (360, 1080 and so on) */
  height: 405px; /* I have no control over this. But this value can different (270, 607 and so on) */
}

div.container {
  background-color: red;
  max-height: 250px;
  overflow: auto;
  display: inline-block;
  min-width: 320px;
  max-width: 760px;
  /* we can add other attributes here */
}

ul.list {
  background-color: green;
  width: 240px; /* I have control over this element, but this value cannot be changed */
  height: 150px; /* I have control over this element, but this value cannot be changed */
  padding: 5px 5px 5px 5px; /* I have control over this element, but this value cannot be changed */
  /* we can add other attributes here */
}