将元素高度限制为内容，并保持折叠溢出

Question

我有一个可以整体使用的弹出模式，但令人烦恼的是它有一个硬编码的max-height，我想消除它。

选项 #1： 最初我探索了在模态上使用height: auto，它确实将模态高度保持在内容的自然高度。但是，当您将浏览器视口缩放到较短的高度时，这会影响模态框的折叠。 模态框溢出视口，而不是只有绿色图像区域溢出。

选项 #2： 我知道 max-content 的可能性（对于 height... 甚至 max-height ？）但我无法得到它可以在任何地方工作，无论如何它的浏览器支持参差不齐。

选项#3（当前）：将模态设置为height: 100% 和max-height: 500px 就足够了，但显然内容需要比这更短。

总的来说，要求是：

A - 在小屏幕中，模态应该折叠并溢出绿色图像区域，从而保持模态标题和按钮在视图中。

B - 在大屏幕中，模态高度只能与内容一样大。

C - 无论发生什么，模态都不应明显超过全局填充 (2em)。

请参阅下面 CSS 中的 #modal：

Demo and code here (Codepen)

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#app {
  background-color: gray;
  width: 75%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 2em;
}

#container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

#modal { 
  /* OPTION #1 */
  /* FAILS in small screen: overflow of green image not invoked */
  /* height: auto; */
  
  /* OPTION #2 */
  /* Not working? */
  /* height: max-content; */
  
  /* OPTION #3 */
  /* WORKS but specifying a max-height is not ideal */
  height: 100%;  
  max-height: 500px;  

  width: auto;
  position: relative;
  background-color: pink; 
  overflow: hidden;
}

#modal_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 2em;
  box-sizing: border-box;
}

#image {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

#image .inner {
  background-color: lime;
  padding: 1em;
  width: 400px;
  height: 200px;
}

#controls {
  background-color: yellow;
  display: flex;
  justify-content: center;
  max-width: 20em;
  width: 100%;
  padding: 1em;
  margin-top: 1em;
}

#cta {
  background-color: white;
  display: flex;
  justify-content: center;
  max-width: 10em;
  padding: 1em;
  margin-top: 1em;
}

<div id="app">
  
  <div id="container">
    <div id="modal">
      <div id="modal_inner">
          <div id="title">TITLE</div>
          <div id="image"> 
            <div class="inner">image</div>
          </div>
          <div id="controls">controls</div>
          <div id="cta">submit</div>   
      </div>
    </div>
  </div>
  
</div>

Answer 1

你差不多好了，使用 max-height:100% 并添加 display:flex，这将在 modal_inner 上产生你想要达到的 height:100% 效果

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#app {
  background-color: gray;
  width: 75%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 2em;
}

#container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

#modal { 
  max-height: 100%;  
  display:flex;
  position: relative;
  background-color: pink; 
  overflow: hidden;
}

#modal_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*height: 100%; remove this*/
  padding: 2em;
  box-sizing: border-box;
}

#image {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

#image .inner {
  background-color: lime;
  padding: 1em;
  width: 400px;
  height: 200px;
}

#controls {
  background-color: yellow;
  display: flex;
  justify-content: center;
  max-width: 20em;
  width: 100%;
  padding: 1em;
  margin-top: 1em;
}

#cta {
  background-color: white;
  display: flex;
  justify-content: center;
  max-width: 10em;
  padding: 1em;
  margin-top: 1em;
}

<div id="app">
  
  <div id="container">
    <div id="modal">
      <div id="modal_inner">
          <div id="title">TITLE</div>
          <div id="image"> 
            <div class="inner">image</div>
          </div>
          <div id="controls">controls</div>
          <div id="cta">submit</div>   
      </div>
    </div>
  </div>
  
</div>