I'm trying to understand how CSS assigns space when the flex-direction for a div is set to column.
My basic layout & goals:
- Root div (fixed width, flex-direction: column)
- Left div (fixed width)
- Right div (take remaining width, flex-direction: row)
- Child div 1
- Child div 2
- Child div 3 (some long text that I want to truncate)
I cannot get Child div 3 to respect the size restriction I want to place on Right div. If Child div 3 does not exist, Right div appears to behave as I want it to. But as soon as one of its children asks for more space, it happily stretches beyond its bounds.
I'd love to understand how I can tell Right div to strictly take the space left and not stretch beyond that, limiting its children as if I had set width: <N>px on it.
I've simplified my layout and sample to illustrate the problem.
<!DOCTYPE html>
<html>
<head>
<style>
.root {
background-color: #c3c3c3;
}
.content {
display: flex;
flex-direction: row;
width: 400px;
padding: 12px;
margin-left: auto;
margin-right: auto;
background-color: #00ff0030;
}
.left {
flex-grow: 0;
flex-shrink: 0;
width: 160px;
height: 160px;
padding: 8px;
background-color: #ff00ff30;
color: white;
font-size: 24px;
}
.right {
flex-grow: 1;
flex-shrink: 0;
display: flex;
flex-direction: column;
background-color: #0000ff30;
padding: 8px;
}
.right > :not(:first-child) {
margin-top: 8px;
}
.right > div {
background-color: #ffffff30;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
overflow: hidden;
}
</style>
</head>
<body>
<div class="root">
<div class="content">
<div class="left">Left</div>
<div class="right">
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Really long text 123 Really long text 123 Really long text 123 Really long text 123</div>
</div>
</div>
</div>
</body>
</html>
