Thiết lập thằng con chiếm toàn bộ phần trống của thằng cha

HTML

<main>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quod cupiditate saepe tempora incidunt, id nobis iure? Neque harum illum voluptatibus a numquam, nihil asperiores, amet provident magni minima tempore!</section>
<aside>150px</aside>
</main>

CSS

main {
display: flex;
margin-bottom: 20px;
}
section {
flex-grow: 1;
}
aside {
flex-basis: 150px;
flex-shrink: 0;
/* flex-shrink: 0; prevents the aside from shrinking, if the section attempts to grow due to its content. (see third example) */
/* Instead of flex-basis: 150px; and flex-shrink: 0; you can use the shorthand: */
/* flex: 0 0 150px; */
}