Question

情况如下：

    <div id="wrapper">
     <div id="scrollable"><div id="textBox"><p>lots of text</p></div></div>
     <div id="form"><p>I am actually a form</p></div>
    </div>

整个包装纸的固定高度为40vh，宽度不确定，因此最大化。在可滚动的div中，有一个具有不同背景和一点填充的文本框，以便您实际可以看到它。我的可滚动条具有固定的最小宽度。如何才能实现将可滚动和文本框紧挨着显示？这是我试过的：

    #wrapper {
      max-height: 40vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: aquamarine;
      overflow: hidden;
    }
    #scrollable {
      max-height: 40vh;
      order: 1;
      width:40%;
      margin: 0 auto;
      overflow: hidden;
      padding: 10%;
    }
    #textBox {
      max-height: 25vh;
      background-color:lightseagreen;
      color: white;
      padding: 10%;
      margin: 5%;
      overflow: auto;
    }
    #form {
      margin: 0 auto;
      order: 2;
    }

如果我没有为textBox定义高度，那么它就不关心并且只是溢出。到目前为止，这似乎更像是一个黑客，我真的想知道如何以一种干净的方式实现这样的事情。

以下是示例： https://jsfiddle.net/rd8v3jqc/1/

#wrapper {
      max-height: 40vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: aquamarine;
      overflow: hidden;
    }
    #scrollable {
      max-height: 40vh;
      order: 1;
      width:40%;
      margin: 0 auto;
      overflow: hidden;
      padding: 10%;
    }
    #textBox {
      max-height: 20vh;
      background-color:lightseagreen;
      color: white;
      padding: 10%;
      margin: 5%;
      overflow: auto;
    }
    #form {
      margin: 0 auto;
      order: 2;
    }

<body>
<div id="wrapper">
     <div id="scrollable">
     <div id="textBox">
     <p>lots of text lots of text lots of text lots of text lots of text lots of textlots of text lots of text lots of text lots of text lots of text lots of textlots of text lots of text lots of text lots of text lots of text lots of textlots of text lots of text lots of text lots of text lots of text lots of text</p>
     </div>
     </div>
     <div id="form"><p>I am actually a form</p></div>
    </div>
</body>

对齐固定宽度div

0 个答案: