HTML，flex，连续两个div，强制一个div的尺寸变小

Question

主语

我有两个 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

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

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