1
當試圖創建一個表格式佈局,其中一個主列應占用所有可用空間時,主列會佔用比所需空間更多的空間,並將其他列拖到容器邊界之外。爲什麼全寬柔性箱柱擠壓其兄弟姐妹?
我正在尋找的行爲就好像我正在使用表格來表示這一點,我給出了一列width: 100%
。
如果你看下面的例子,你會發現第一行的第二列被壓扁,即使溢出被隱藏。第一列似乎比其他列表具有某種優先級。
我很好奇爲什麼會發生這種情況,以及可重複使用的解決方案。我不想在任何列上設置固定寬度。
.list {
border: 1px solid #000;
}
.list-row {
display: flex;
border: 1px solid #AAA;
}
.list-column {
border: 1px solid blue;
white-space: nowrap;
}
.list-column--main {
flex-grow: 1;
}
.hide-overflow {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<meta charset="utf-8">
<title>Example</title>
<style type="unprocessed" id="AutoprefixerIn">%css%</style>
<style id="AutoprefixerOut"></style>
<script>
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css;
</script>
</head>
<body>
<div class="list">
<div class="list-row">
<div class="list-column list-column--main hide-overflow">
The main column that has a very very very very very very very very very very very very very very very very very very very very very long title
</div>
<div class="list-column">
<a href="#">Close</a>
</div>
</div>
<div class="list-row">
<div class="list-column list-column--main hide-overflow">
A shorter title
</div>
<div class="list-column">
<a href="#">Close</a>
</div>
</div>
</div>
</body>
</html>
This Works!我想知道它爲什麼這樣工作,爲什麼'flex-shink:100'可以工作,但'flex-shink:1'不會,如果有人會詳細說明的話。 – 2014-12-08 15:16:56