用户输入文本时，如何防止重新调整div的大小？

Question

 .container { display: table; width:10em; height:10em; max-width: 10em; max-height: 10em; min-width: 10em; min-heigth: 10em; } .item-list1 { display:table-cell; width:10em; height:10em; max-width: 10em; max-heigth: 10em; min-width: 10em; min-heigth: 10em; vertical-align:bottom; overflow:scroll; resize: vertical; /* Does nothing with table-cell*/ }

  <body> <div class="container green" contenteditable="true"> <div class="item-list1"> <div class="item">Item 1</div> <div class="item"> Item 2 mighdt wrap to multiple linesddddddddddddddddddddddddddddddddddddddddddddddddddddd</div> </div> </div> </body>

如上例所示，我想在div-textarea中使用垂直对齐并同时滚动。

在此示例中，如果用户在div（contenteditable）中输入文本，则div的大小将扩展到下面。 我真正想知道的是以下内容。

问题：我只想扩展滚动条，而不是div的大小。 有什么可能的方法来实现呢？

Answer 1

通过更改table-cell来block您可以实现您所追求的目标：

代码段

 .container { display: table-cell; width: 10em; height: 10em; max-width: 10em; max-height: 10em; min-width: 10em; vertical-align: bottom; min-height: 10em; } .item-list1 { display: inline-block; width: 10em; max-width: 10em; max-height: 10em; min-width: 10em; overflow: auto; }

 <div class="container green" contenteditable="true"> <div class="item-list1"> <div class="item">Item 1</div> <div class="item">Quisque gravida sit amet dolor.</div> </div> </div>

Answer 2

这是工作小提琴

.item{
    height: 1em;
    overflow-y: scroll;
}

您只需要将此添加到CSS中即可。

 .container { display: table; width:10em; height:10em; max-width: 10em; max-height: 10em; min-width: 10em; min-height: 10em; } .item-list1 { display:table-cell; width:10em; height:10em; max-width: 10em; max-height: 10em; min-width: 10em; min-height: 10em; vertical-align:bottom; resize: vertical; } .item{ height:1em; overflow-y: scroll; }

  <div class="container green" contenteditable="true"> <div class="item-list1"> <div class="item">Item 1</div> <div class="item">Item 2 mighdt wrap to multiple linesddddddddddddddddddddddddddddddddddddddddddddddddddddd</div> </div> </div>

Answer 3

在css中进行如下更改，它将可以完美工作：

.container {
width:10em;
height:10em;
max-width: 10em;
max-height: 10em;
min-width: 10em;
min-heigth: 10em;
}

.item-list1 {
width:10em;
height:10em;
max-width: 10em;
max-heigth: 10em;
min-width: 10em;
min-heigth: 10em;
vertical-align:bottom;
overflow:scroll;
resize: vertical;
}

希望这可以帮助。 如果您按要求进行操作，请不要忘记将其标记为答案并添加声誉。

用户输入文本时，如何防止重新调整div的大小？

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-08-29 08:28:50

代码段

解决方案2
0 2016-08-29 08:27:44

解决方案3
0 2016-08-29 08:35:52

用户输入文本时，如何防止重新调整div的大小？

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-08-29 08:28:50

代码段

解决方案2 0 2016-08-29 08:27:44

解决方案3 0 2016-08-29 08:35:52

解决方案1
4 已采纳 2016-08-29 08:28:50

解决方案2
0 2016-08-29 08:27:44

解决方案3
0 2016-08-29 08:35:52