flex problem

by jamacoe

HTML

<div class="outer">
		<div class="title">
			Title
		</div>
		<div class="inner">
			<span class="text">
				This is a text that can get pretty long. It should break within the box, but it should never exceed the bottom border of the
				outer container. If the space is too small, it should not overflow, but be cutted off. The following tailing link should always be visible at the
				end of the text.
				<span class="more">
					[...] <a href="#">more</a>
				</span>
			</span>
		</div>
	</div>

CSS

.outer {
		display: flex;
		flex-direction: column;

		height: 4em;

		font-size: 1em;
		border: 1px solid black;
		background-color: powderblue;
	}
	.inner {
	}
	.title {
		flex: 0 0 auto;
		font-weight: 600;
	}	
	.text {
		flex: 1 1 auto;
	}
	.more {
		flex: 0 0 auto;
	}