Flexbox 在右溢出时适合行的高度答案

【问题标题】：Flexbox fit height of row while overflowing rightFlexbox 在右溢出时适合行的高度
【发布时间】：2020-02-08 02:38:27
【问题描述】：

我想创建如下布局：

左列具有指定的宽度（例如 30%）。右列有任意数量的子元素，它们向右溢出。这些子级应适合左列的高度，而不增加父级的宽度。

目前，如果没有足够的孩子，要么增加右列的高度，让孩子占据整个宽度，要么所有孩子都适合宽度，所以不够高。

它需要：

保持所有子项的纵横比
完全适合左列的高度
水平溢出

.container-a,
.container-b {
  display: flex;
  border: 2px solid red;
}

.container-a {
  flex-direction: row;
  padding: 10px;
}

.flex-child {
  flex: 1;
  margin-right: 10px;
}

.flex-child img {
  width: 100%;
}

.first-child {
  max-width: 40%;
}

<div class="container-a">
  <div class="flex-child first-child">
    <img src="https://picsum.photos/800/450">
  </div>
  <div class="flex-child">
    <div class="container-b">
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random">
        Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random">
        Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random">
        Some text content
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox overflow

【解决方案1】：

为了使这个布局工作，我认为你需要一个高度约束和一个 flex 属性的组合。

.container-a,
.container-b {
  display: flex;
  border: 2px solid red;
}

.container-a {
  padding: 10px;
  height: 150px; /* limits images' intrinsic heights */
}

.flex-child {
  display: flex;
  margin-right: 10px;
}

.container-b>.flex-child {
  flex-shrink: 0;  /* disable flex-shrink */
  flex-direction: column; /* stack items */
}

.flex-child img {
  width: 100%;
  min-height: 0; /* override min-height: auto default */
}

.first-child {
  flex: 1 0 40%; /* equivalent to max-width: 40%, but also disables flex-shrink */
}

* { box-sizing: border-box; } /* factor borders and padding into lengths */

<div class="container-a">
  <div class="flex-child first-child">
    <img src="https://picsum.photos/800/450">
  </div>
  <div class="flex-child">
    <div class="container-b">
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random"> Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random"> Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random"> Some text content
      </div>
    </div>
  </div>
</div>

【讨论】：