html - 防止文本破坏 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 中，只需从类 .top 中删除 height: 20% 制作图像和文本始终位于粉红色区域。