当文本太多时，flexbox布局中的子项扩展到父项外部

Posted 2021-04-11

首先，我正在使用React JS并尝试使用react-textfit模块来允许文本自动适合div而不扩展div。

但是，它似乎永远不会起作用，因为子项目似乎在父项之外继续扩展。我相信因为这个，react-textfit模块永远不会被调用。

那么它目前的样子是：

注意flex子项如何在外部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>

答案

这将根据您的要求正常工作

       .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;
        }