從動態變化水平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 */ 
}