自动调整的高度始终显示内容

Question

此代码段是更复杂的移动布局的一部分。我唯一无法编辑的是section高度和溢出。

结构很简单：2个div，第一个包含图像，后者包含文本内容。无论设备分辨率或设备方向（横向/纵向），我都试图使文本内容（红色边框内）始终可见并且不会从页面中裁剪出来。目前在横向页面或非常低的分辨率上被裁剪出来。当文本内容空间不足时，div.logo的高度必须降低。

<style>
  * {
    margin: 0
  }
  
  section {
    display: flex;
    flex-flow: column;
    height: 100vh;
    /*cannot edit*/
    overflow: hidden/*cannot edit*/
  }
  
  div {
    flex: 1;
    justify-content: center;
  }
  
  div.logo img {
    height: 100%
  }
  
  div.logo {
    height: 40vh
  }
  
  div.content {
    background: lightgreen;
  }
  
  span {
    border: 1px solid red;
    display: inline-block
  }
</style>
<section>
  <div class="logo">
    <img src="https://via.placeholder.com/500x500">
  </div>
  <div class="content">
    <span>this content should be always visible, div.logo should be resized in height in case of div.content doesn't have enough space
        <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    	<button>button 1</button><button>button 2</button>
    	</span>
  </div>
</section>

这是当前状态和我想要完成的事情

Answer 1

您可以自动修复任何内容的高度，如果您使用图像徽标作为背景，那么它会更好，因为css代码使用以下内容调整高度：

 -webkit-background-size: cover;        /* Safari 3.0 */
 -moz-background-size: cover;           /* Gecko 1.9.2 (Firefox 3.6) */
   -o-background-size: cover;           /* Opera 9.5 */
      background-size: cover;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

如果你需要在DOM中使用背景，你可以在线使用这种风格：

 <tagname style=background-image:(url);"> </tagname>

我希望它有效，请告诉我你是否需要别的东西。