Textarea自动高度在flex中不起作用
是因为在flex布局中，父容器的高度由其子元素的高度决定，而Textarea默认的高度是由其内容决定的。当Textarea的内容发生变化时，其高度并不会自动调整，导致自动高度在flex布局中不起作用。
解决这个问题的方法是使用JavaScript来动态调整Textarea的高度。可以通过监听Textarea的输入事件，获取其内容的高度，并将该高度赋值给Textarea的style属性中的height属性，从而实现Textarea的自动高度调整。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: column;
}
.flex-item {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<textarea class="flex-item" id="myTextarea" oninput="autoResize()"></textarea>
</div>
<script>
function autoResize() {
const textarea = document.getElementById('myTextarea');
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
</script>
</body>
</html>在上述示例中，我们使用了flex布局，并给Textarea添加了一个flex-item类，使其占据剩余的空间。通过监听Textarea的输入事件，调用autoResize函数来动态调整Textarea的高度。autoResize函数首先将Textarea的高度设置为auto，然后将其内容的高度赋值给Textarea的style属性中的height属性，从而实现自动高度调整。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云容器服务（TKE），腾讯云函数计算（SCF）。
- 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整计算资源。
- 腾讯云容器服务（TKE）：提供容器化应用的部署、管理和扩展能力，适用于云原生应用的构建和运行。
- 腾讯云函数计算（SCF）：无服务器计算服务，可按需运行代码，无需关心服务器管理，适用于事件驱动型应用。
以上是关于Textarea自动高度在flex中不起作用的解释和解决方法，希望能对您有所帮助。
相关·内容
1回答
我使用的是语义UI React，theirTextarea有一个autoHeight属性，它可以在您创建新行时自动扩展文本区域。如果Textarea被具有display: Grid.Column属性的flex包装，则停止工作。<Grid.Column style={{'display':'flex','flex-direction':'column', 'align-items':
浏览 31提问于2019-01-30得票数 0
我的textarea在我的HTML里。对于元素，我使用codemirror.js和codemirror.css模块( )。<md-content flex style="display: flex; flex-flow: column;">});
当我在浏览器中
浏览 2提问于2016-06-12得票数 0
回答已采纳
2回答
无法调整文本区域高度的大小
、、、、
在我的项目中使用textarea时，我注意到了一个奇怪的bug。如果我在没有用户交互的情况下通过代码更改textarea的高度，那么这个高度就会停留在这个大小上。例如，如果您单击“更改大小”按钮(在上面的jsfiddle中)，然后尝试使用元素抓地力(位于右下角)将大小调整回初始大小，则不能这样做，这就像新高度是textarea的新的“最
浏览 5提问于2016-01-22得票数 3
我有一个div，它包含一个标签、一个文本区域和一个按钮： <label>Label</label <文本区域如何填充剩余的高度而不计算它。如果我给出高度: 100%，它会给文本区域一个300 is以外的高度；
编辑:我已经从文本框改为文本框，正如一些评论所建议的那样。另外，我想要的是3个控件在堆栈中，
浏览 2提问于2017-03-23得票数 0
回答已采纳
下面的示例在Chrome中正常工作，但在Firefox中不起作用。 <div class="textarea">
<textarea placeholder="<
浏览 1提问于2018-01-30得票数 0
回答已采纳
border-box; height: 100%;}
background-color: #eee; flex-direction: column; padding: 10px; flex-grow: 1; <div class="expand">
浏览 2提问于2017-09-14得票数 4
回答已采纳
overflow: auto;}
margin-top: 10px; </div>
现在，我到底要做的是根据其他兄弟姐妹
浏览 0提问于2019-04-15得票数 0
回答已采纳
下面是我所做工作的一个例子： <div class='form-item'> <textareaid='addComment'></textarea> </div>
<span class=&
浏览 3提问于2022-09-29得票数 0
尝试在flex-item中创建一个可滚动的div。如果内容超出视区，这里的编辑部分应该是可滚动的。Edge和火狐浏览器一切正常，但Chrome忽略了max-height: 100%。id="root" style="height: 100vh; font-size: 100px">
<div id="form" style="max-height: 100%; display: flex; flex-direction:
浏览 5提问于2020-05-27得票数 0
回答已采纳
基本上，当垂直空间很小时，textarea的容器缩小到0，因为所有其他非挠曲元素都需要这个空间，而不尊重文本区域的最小高度。谢谢! flex-direction: column;}
flex: 1;<app flexlayout> <div flex flexlayout style
浏览 0提问于2016-09-05得票数 0
回答已采纳
1回答
format: 'F j, Y g:i A', flexname: 'subject', },{ text: 'Cancel',
handler: 'onClick_bt
浏览 2提问于2015-04-29得票数 0
回答已采纳
2回答
<form> <textarea placeholder="Type your message></textarea> <textarea plac
浏览 7提问于2017-02-05得票数 1
回答已采纳
4回答
我正在创建一个水平和垂直中心在页面中的TextArea。考虑到我需要TextArea垂直中心，我不能让文本区域是100 w和100 h，我需要它从一个小的高度开始，然后随着用户类型的增长。(灰色bkg仅用于调试) flex: 1 1
浏览 4提问于2018-02-07得票数 0
回答已采纳
出于某种原因，我的textarea似乎不想合作。我想要做的是，把它的高度扩大到100%的空间，在DIV中每一个红色箭头描述如下。但也许我做错了什么。也许一双新的眼睛会有很大帮助。.content { height: 500px;}}
浏览 0提问于2015-12-07得票数 3
回答已采纳
2回答
我想创建一个满足以下条件的页面：
<style> display: flex; height: 100%/>4<br
浏览 6提问于2017-07-29得票数 0
回答已采纳
我有以下问题，我有在flex-wrap中输入的表单，但在一些表单中我有<textarea rows="5"></textarea>，它比输入字段占用更多的高度。flex-wrap中是否可以包含以下结构：.flex {
display:
浏览 0提问于2017-11-03得票数 0
3回答
我目前正在使用CodeMirror在浏览器的文本区编辑代码。如果我有超过20行的代码，它会在右边添加一个垂直滚动条。但我不需要这个滚动条。相反，我需要编辑器的大小垂直增长。
有人能帮上忙吗？
浏览 9提问于2012-09-08得票数 8
3回答
我正试图在移动屏幕上构建一个基本的信使视图。所以顶部有一个标题，中间有一个可滚动的消息列表，底部有一个带有textarea和按钮的栏来发送新消息。我正在使用一个自动大小插件使textarea在用户输入消息时展开。问题是，当它改变了“高度”属性时，它将开始溢出它所在的容器的高度，而不是扩展到占用更多空间的容器。padding: 1rem;#container #message-list { flex-shrink
浏览 0提问于2018-07-02得票数 2
回答已采纳
1回答
显然，使用flexbox似乎在每个子节点之后添加了一个新行字符。是什么引起的？有什么办法可以绕过吗？小提琴：$('.toggleFlex').on('click', function() {
$('.container').
浏览 1提问于2015-01-15得票数 12
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
