Flex layout does not respect fixed column widths
I am having problems expanding the bottom div when adding a lot of text to the center of the div.
HTML:
<body>
<div class="k-box k-flex k-flex-row black k-flex-item">
<div class="k-box cyan" style="width: 200px;">
<div class="k-box" style="height: 100%;">Left which should always be 200px!</div>
</div>
<div class="k-box k-flex k-flex-column k-flex-item">
<div class="k-panel k-flex k-flex-column k-flex-item">
<div class="k-box k-flex-item" style="">When the text is short it works!</div>
</div>
</div>
<div class="k-box green" style="width: 200px;">right</div>
</div>
<br />
<div class="k-box k-flex k-flex-row k-flex-item" style="">
<div class="k-box cyan" style="width: 200px;">
<div class="k-box" style="height: 100%;">Left which should always be 200px!</div>
</div>
<div class="k-box k-flex k-flex-column k-flex-item">
<div class="k-panel k-flex k-flex-column k-flex-item">
<div class="k-box k-flex-item">When long... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula ante eget aliquam semper. Vestibulum aliquam rhoncus sem nec tristique. Aenean sagittis turpis tellus, asemper tellus laoreet eu. Suspendisse condimentum auctor sapien eget ullamcorper. In a efficitur neque, vel ullamcorper nulla. Vestibulum sed suscipit neque. Ut in blandit erat. Aliquam sed feugiat nulla, vel porttitor tortor. Curabitur interdum turpis et dolor lobortis, non eleifend diam ornare. In sem nisi, egestas eget nisl ac, lobortis tristique sem.</div>
</div>
</div>
<div class="k-box green" style="width: 200px;">right</div>
</div>
</body>
CSS
div.k-flex {
border: solid 1px red;
}
.k-box {
position: relative;
}
.k-flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.k-flex-item {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.k-flex-row {
flex-direction: row;
-webkit-flex-direction: row;
}
.k-flex-column {
flex-direction: column;
-webkit-flex-direction: column;
}
How can I make the left and right columns in the bottom div stay 200px wide, and also make the middle automatically start scrolling when the content gets high for the div?
Violin:
source to share
So the whole point of Flexbox has to be flexible, so saying something like always 200px is something you really don't want to do with Flexbox. You can do this by setting the width / max width, but your best bet is to use flex-basis . So if you set the base flex to 200px, these columns will try their best at 200px. Theyll still die if the layout requires it (in this case when the window gets too small), but in general they will stay 200px.
Example:
.k-flex {
display: flex;
height: 150px;
}
.k-flex-item {
flex: 1 1 200px; /* flex basis is the third property */
overflow: auto;
}
And updated fiddle: http://jsfiddle.net/gj21nyh0/
(I also added that the parent's height to make it easier to see how the scrolling would work)
Update: as vals pointed out, the second value is flex compression, if you set the value to 0 then it keeps the main column from compressing below the flex level. Depending on what you need for your layout might be helpful. Thank vals
source to share
Invalid property flex-shrink
if you set the value to 0, you are telling the flex system that you don't want your original size to shrink.
Install it along with width: 200px
and it will work.
But the usual way to do this would be to set flex: 1 0 200px;
this set to grow to 1, shrink to 0, and also flex based on 200px;
more flexible than setting the width
source to share
Set min-width:200px;
for left column as per the comment from Shaggy.
http://jsfiddle.net/eugfcLo2/6/
Any reason why this won't work? I think this solves the problem.
source to share