Дочерние элементы в макете flexbox расширяются за пределы родительского, когда текста слишком много

Question

Прежде всего, я работаю с React JS и пытаюсь использовать модульact-textfit, чтобы текст автоматически помещался в div без расширения div.

Однако, похоже, это никогда не работает, потому что дочерние элементы, кажется, продолжают расширяться за пределы родительского элемента. Я полагаю, что из-за этого никогда не вызывается модуль реагировать на текст.

Итак, как это выглядит в настоящее время:

Обратите внимание, как гибкие дочерние элементы расширяются за пределы внешнего div (красная рамка).

Вот упрощенная форма моего кода (преобразованная из стиля React в простой HTML / CSS):

.parent {
	margin: 200px;
	width: 300px;
	height: 200px;
}

.outer {
	width: 100%;
	height: 100%;
	display: flex;
	background-color: white;
	justify-content: center;
	align-items: center;
	padding: 10px;
	flex-direction: column;
	border: solid red 3px;
}

.inner {
	flex: 1;
	font-size: 20px;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	border: solid blue 1px;
}

<div class="parent">
	<div class="outer">
		<div class="inner">
			<Textfit mode="multi">
				The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
			</Textfit>
		</div>
		<div class="inner">
			<Textfit mode="multi">
				The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
			</Textfit>
		</div>
		<div class="inner">
			<Textfit mode="multi">
				The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
			</Textfit>
		</div>
	</div>
</div>

Answer 1

Это будет хорошо работать в соответствии с вашим требованием

       .parent {
            display: flex;
            justify-content: center;
            align-items:center;
        }

        .outer {
            width: 300px;
            height: auto;
            display: flex;
            background-color: white;
            padding: 10px;
            flex-direction: column;
            border: solid red 3px;
            box-sizing: border-box;
            position: absolute;
            top:0px
        }

        .inner {
            flex: 1;
            font-size: 40px;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            border: solid blue 1px;
        }