HTML，flex，连续两个 div，强制一个 div 的大小更小

Question

<分区>

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>