html - Flexbox等于柱高设置主导柱高？

我做了这个例子：

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

我希望裁剪左侧的图像，但我希望内容决定.example元素的总体高度。

当前，图像指示整个元素的总体高度。我想将图像裁剪为右列中内容的大小。用我的例子可以吗？

最佳答案

如果我正确理解您的要求，则希望您的右栏设置#example的总高度

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  max-width: 100%;
  position: absolute;
}

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

关于html - Flexbox等于柱高设置主导柱高？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47887564/