Menu
When trying to create a table-like layout where one main column should consume all available space, the main column ends up taking up more space than desired and pushes other columns outside the bounds of the container.
The behavior I'm seeking is as if I were using a table to lay this out and I gave a column width: 100%.
If you look at the example below, you'll see that the second column of the first row is squashed even though the overflow is to be hidden. The first column seems to have some kind of sizing priority over the others.
I'm curious why this happens and what a reusable solution is. I don't want to set a fixed-width on any of the columns.
.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>
469
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
The CSS flex-grow property allows flex items to grow as the parent container increases in size horizontally. This property accepts numerical values and specifies how an element should grow relative to its sibling elements based on this value.
Using the flex-shrink property, you can specify which columns should shrink more when something is too wide for the box.
.list-column {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
.list-column--main {
flex-grow: 1;
flex-shrink: 100;
flex-basis: 100%;
}
The list-column--main columns is the only column that grows, but it's also the only column that shrinks. The other column(s) will not grow past their original size and will not be allowed to shrink.
I had expected from reading the spec that flex-shrink: 1 would work well enough, but in practice, something much larger like flex-shrink: 100 actually did what I wanted.
Further reading (flexbox spec): http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
