给定一个具有 2 列的固定大小的 flex 容器:
我要控制
textarea
宽度,当用户调整大小(在两个方向)时。如何强制执行容器的
max-width
大小为 textarea
(没有 javascript 和/或禁用水平调整大小)就像 textarea
是容器的直接 child 吗?我发现的唯一可行的仅 CSS 解决方案是
display: contents
在 .right-content
哪一栏unfortunately is not supported by all browsers ..container {
max-width: 100px;
background-color: red;
display: flex;
}
.left-content {
background-color: yellow;
}
.right-content {
display: contents;
}
<div class="container">
<div class="left-content">foo</div>
<div class="right-content">
<textarea>bar</textarea>
</div>
</div>
最佳答案
简单地做如下:
.container {
max-width: 100px;
background-color: red;
display: flex;
}
.left-content {
background-color: yellow;
}
.right-content {
min-width:0; /* this will prevent the element from growing more than the flex container
related: https://stackoverflow.com/q/36247140/8620333*/
}
textarea {
max-width:100%; /* this will prevent the text area from growing more than its parent*/
display:block; /* this will remove the whitespace from the bottom*/
box-sizing:border-box; /* don't forget this*/
opacity:0.8; /* to illustrate */
}
<div class="container">
<div class="left-content">foo</div>
<div class="right-content">
<textarea>bar</textarea>
</div>
</div>
关于html - 对所有可调整大小的子元素强制使用 flex 容器的最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60628265/