Question

＆＃13;

.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*/	
}

＆＃13;

  <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>

＆＃13;

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

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

问题：我只想展开滚动条，而不是div的大小。有没有办法实现这个？

Answer 1

通过将table-cell更改为block，您可以实现以下目标：

代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这里是Working Fiddle

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

你只需要将它添加到你的CSS中。

＆＃13;

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

＆＃13;

  <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>

＆＃13;

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

希望这会有所帮助。如果按照您的要求工作，Donot会忘记标记为答案并添加声望。

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

3 个答案:

代码段