Если я поместил три элемента во flexbox, который имеет различное количество контента, по умолчанию align-items
устанавливается на stretch
, и, таким образом, высота всех столбцов flexbox одинакова. Тем не менее, я хочу, чтобы текст в каждом из столбцов занимал всю доступную ему высоту при автоматической настройке ширины. Как мне этого добиться?
Я прилагаю пример кода для него.
.container{
display:flex;
border: 2px red;
border-style: solid;
}
.col1{
background-color: brown;
color:white;
}
.col{
border: 2px green;
border-style: solid;
}
<div class="container">
<div class="col col2">
<h1>Hello friends</h1>
<p>An article (with the linguistic glossing abbreviation art) is a word that is used with a noun (as a standalone word or a prefix or suffix) to specify grammatical definiteness of the noun, and in some languages extending to volume or numerical scope. The articles in English grammar are the and a/an, and in certain contexts some. "An" and "a" are modern forms of the Old English "an", which in Anglian dialects was the number "one" (compare "on" in Saxon dialects) and survived into Modern Scots as the number "owan". Both "on" (respelled "one" by the Norman language) and "an" survived into Modern English, with "one" used as the number and "an" ("a", before nouns that begin with a consonant sound) as an indefinite article.</p>
</div>
<div class="col col3">
<h1>Bye friends</h1>
<p>An article (with the linguistic glossing abbreviation art) is a word that is used with a noun (as a standalone word or a prefix or suffix) to specify grammatical definiteness of the noun, and in some languages extending to volume or numerical scope. The articles in English grammar are the and a/an, and in certain contexts some. "An" and "a" are modern forms of the Old English "an", which in Anglian dialects was the number "one" (compare "on" in Saxon dialects) and survived into Modern Scots as the number "owan". Both "on" (respelled "one" by the Norman language) and "an" survived into Modern English, with "one" used as the number and "an" ("a", before nouns that begin with a consonant sound) as an indefinite article.</p>
<p>An article (with the linguistic glossing abbreviation art) is a word that is used with a noun (as a standalone word or a prefix or suffix) to specify grammatical definiteness of the noun, and in some languages extending to volume or numerical scope. The articles in English grammar are the and a/an, and in certain contexts some. "An" and "a" are modern forms of the Old English "an", which in Anglian dialects was the number "one" (compare "on" in Saxon dialects) and survived into Modern Scots as the number "owan". Both "on" (respelled "one" by the Norman language) and "an" survived into Modern English, with "one" used as the number and "an" ("a", before nouns that begin with a consonant sound) as an indefinite article.</p>
</div>
<div class="col col1">
<p>An article (with the linguistic glossing abbreviation art) is a word that is used with a noun (as a standalone word or a prefix or suffix) to specify grammatical definiteness of the noun, and in some languages extending to volume or numerical scope.</p>
</div>
</div>
Насколько я полагаю, это должно быть решено с помощью свойства flex-grow, flex-shrink и flex-based, но я не могу найти, как чтобы использовать это
PS - текст скопирован из Википедии