HTML/CSS:创建两行，分别有2列和3列，它们应该占据窗口视口，单元格应该滚动

Question

我尝试用基本的CSS（没有CSS或JS库，它应该全部适合一个HTML文件）创建一个简单的HTML页面布局。

+-------------------------------------------------+
| row1col1 ..................... row1col1         |
|                                                 |
|                                                 |
|                                                 |
| row2col1 ......  row2col2 ...... row2col3 ..... |
|                                                 |
|                                                 |
+-------------------------------------------------+

布局应该显示两行信息，其中第一行有两个单元格/列，第二行有3列。

我希望这两行分别占窗口高度的60%和40%，但至少400px。

第一行中的列应占窗口宽度的60%和40%，但至少400px；

第二行的列应占窗宽的1/3，但至少300px；

但是，如果这样的列/单元格中有许多行内容（第一行或第二行），我不希望单元格垂直扩展超过行的高度（第一行的高度应该是窗口高度的60%但至少400px，第二行的高度应该是窗口高度的40%但至少400px)。 如果单元格内有更多的行，则应显示滚动条，使它们可滚动。

我尝试从SO复制，粘贴一些类似问题的解决方案，但我尝试的都不起作用，对于如何实现每行几列的行为，有许多非常不同的建议。 在我看来，表格，表格行，表格单元格等显示样式最适合于此，但使用这些样式，我发现无法限制单元格的高度或使其可滚动（垂直或水平）。

我真的想让单元格适应封闭窗口或Iframe的大小，行和列占高度/宽度的一定百分比，如果有更多的显示，单元格使用滚动条，但我不知道如何做到这一点。

到目前为止，我所拥有的，不起作用的内容在这里:https://jsfiddle.net/johann_petrak/caflqdz5/

Answer 1

下面是我使用flex属性对它的看法。 将最小高度和最小宽度设置为400px是相当大的，可能会搞砸您正在寻找的响应性。

null

  .row{
        min-height: 400px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
      }

      .col{
        border: 1px solid black;
        display: inline-block;
        min-height: 400px;
        min-width: 400px;
        padding: 10px;
        white-space: normal;
        overflow-y: scroll;
      }

<section>
      <div class="row" style="height:60vh">
        <div class="col" style="width:60%;">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col" style="width:40%;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>

      <div class="row" style="height:40vh;">
        <div class="col">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="col">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </section>