从动态变化水平UL垂直

Question

也许重复的问题，但我没有发现这个问题的任何解决方案...

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

在里面我有另一个div（我们称之为container），关于它我有控制权。
并在此div我有3 ul元素，每个元素为240px。

我就希望：

如果master具有小于720像素（320x240像素每个ul乘以的ul's数的），我想垂直显示ul元素（一个在上面比其他）。
但是，如果master有超过720px，我想要水平（并排）显示ul元素。

除此之外，我希望我的container元素具有可能的最小宽度以适应其子ul。

这是可能的使用只有 css/html？

我已经尝试过使用flex，float和tables没有成功......
我制作了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 */ 
}