HTML、flex、一行两个div，强制一个div的大小更小。

Question

Subj.

我有两个div(左和右)。我希望使左div类似于主div，并强制右div具有与左div相同的高度，即使它将有更多的内容(并执行overflow: hidden)。如果有一种方法可以在没有css和html的情况下使用js，我将非常感激。

这里有一个小片段，我的标记是什么样子的：

​

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.children-1 {
  width: 66.6%;
  background: green;
}

.children-2 {
  width: 33.4%;
  background: yellow;
}

<div class="parent">
  <div class="children-1">
    <p>My content</p>
  </div>
  
  <div class="children-2">
    <p>a lot of content<p>
    <p>a lot of content</p>
  </div>
</div>

​

Answer 1

将固定高度应用于容器，并在第二个子DIV上使用overflow-y: hidden;：

​

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 200px;
}

.children-1 {
  width: 66.6%;
  background: green;
}

.children-2 {
  width: 33.4%;
  background: yellow;
  overflow-y: hidden;
}

<div class="parent">
  <div class="children-1">
    <p>My content</p>
  </div>
  
  <div class="children-2">
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
  </div>
</div>

​

这里是没有固定高度的第二个版本，但是HTML结构被更改了:只有一个子版本(正确的一个)，第一个子版本中的内容现在在父级中。它对该子元素使用绝对定位，并隐藏子元素的溢出-请参见下面的实际设置：

​

html,
body {
  margin: 0;
}

.parent {
  position: relative;
  padding: 1em;
  background: green;
  overflow-y: hidden;
}

.children-2 {
  width: 33.4%;
  position: absolute;
  right: 0;
  top: 0;
  background: yellow;
}

<div class="parent">
  <p>My content</p>
  <p>My content</p>

  <div class="children-2">
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
  </div>

</div>

​

Answer 2

当然可以!只需使用CSS网格！！

.parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.children-1 {
  background: green;
}
.children-2 {
  background: yellow;
  overflow-y: hidden;
  max-height: 200px; // Limit the height 
}

https://codepen.io/Konrad001/pen/MOxzEe