Question

我的情况：https://plnkr.co/edit/ppuUhrWB08ULGuFT4tXn

我建议弹出结果窗口。

我有一个包含两个项目的垂直弹性容器。第二项也是垂直弹性容器。它包含几个水平弹性容器的项目。这些水平容器包含两个项目。其中一个项目包含一个图像，设置为高度：100％。另一项设置为填充剩余空间。

视觉表现

gray =顶级垂直弹性容器
绿松石=固定项目
green =第二个垂直弹性容器
yellow = horizontal flex-container
red =包含图片的flex项目
dark purple = image
magenta =指定填充空白区域的弹性项目

期望：包含图像的项目缩小以包含高度：100％图像，第二个图像展开以填充空间。

实际结果：该项目是图像的自然宽度，即使图像本身较小，也不会缩小。

视觉表现：

我也尝试过不将img放入容器中并让它只是一个弹性项目，但是高度：100％使图像与垂直弹性容器一样大，因为¯\ _（ツ）_ /¯

我不确定如何解决这个问题。

HTML：

<div class="body-container">
  <div class="body flex-column">
    <div class="header flex-hold w-100">
      I AM A HEADER
    </div>
    <div class="long-content flex-column w-100 flex-fill d-flex">
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>

    </div>
  </div>
</div>

CSS：

body {
  height:100vh;
  margin:0px;
  padding:0px;
}

div {
  display:inline-block;
}

.d-flex {
  display:flex;
}

.flex-column {
  flex-direction:column;
}

.body-container {
  height:100%;
}

.body {
  display:flex;
  height:100%;
  flex: 1 1 auto;
}

.flex-hold {
  flex: 0 0 auto;
}

.flex-fill {
  flex: 1 1 auto;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.header {

}

.long-content {
  background-color:#ffff00;
}

.item {
  margin:4px;
  background-color:#ccc;
  flex: 1 1 auto;
}

.thumb {
  display:block;
}

img {
  height:100%;
}

Answer 1

我找到了一个适合我特定情况的解决方案，但并不完全确定它在野外是否适用。主要受到这个问题的启发：https://stackoverflow.com/a/15389545/1857860

我重新组织了我的水平容器的html：

CameraSource.Builder

所以，我使我的水平flex容器相对，然后插入两个包装元素。第一个包装（内包装）是位置：绝对，高度：100％，宽度：100％。第二个包装器只是另一个水平的flex容器。关于将flex容器放入绝对容器内的事情＆＃34;重置＆＃34;它认为儿童元素的高度为100％。所以，之后我只需要移除我的图像周围的容器并将其设置为高度：100％和flex：0 0 auto;

嵌套的Flexbox +图像

1 个答案: