防止文字破坏flexbox容器

Question

我正在尝试通过文本链接将图片放入flexbox容器中。它破坏了我的容器，使它变成小屏幕上的下一个问题：

 <el-container>
    <el-main>
      <div class="top">
        <div class="download-compiler">
            <div class="dmd-download">
                <el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
                <el-link style="color: black; font-size: 1.3em;">DMD</el-link>
            </div>
        </div>
        <div class="code-snippets">
          <div class="code-snippets-header">
            Samples:
          </div>

          <div class="code-snippets-content"></div>          

        </div>
      </div>

      <div class="middle">
        <div class="main-app-img">
        </div>
      </div>

    </el-main>
</el-container>

这是最小的jsfiddle。 https://jsfiddle.net/dhoc4zw5/

Answer 1

我不太确定您要实现的目标，但是在您的jsfiddle中，只需从类height: 20%中删除.top即可使图像和文本始终停留在粉红色区域。