Flexbox适合行的高度，同时向右溢出

Question

我要创建如下所示的布局：

左列具有指定的宽度（例如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>

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