css - span 没有出现在它的 div 里面

Question

使用 chrome 开发者，为什么 iframe 之后的 span 没有出现在它的 div 标签内？

.gl-bot2-flex {
    display: flex;
    justify-content: space-between;
}

.gl-bot2-left, .gl-bot2-right{
   width:47%;
   }

<div class="gl-bot2-flex">
   <div class="gl-bot2-left">
      <iframe src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" width="100%" height="100%"><br />
      </iframe>
      <span class="gl-pin">click on pin to see further details of gas leak</span>
   </div>
   <div class="gl-bot2-right">
      <ul>
         <li>The Audit confirmed 292 unrepaired gas leaks in Weston: 66% more than reported by National Grid 12/31/18. 35% of Weston’s leaks are large volume leaks.</li>
         <li>Using the industry standard “leak extent” method, 102 of the leaks measured 2,000 ft2 or more. These large volume leaks are deemed of “Significant Environmental Impact” (G3SEI) according to the latest ruling by the Department of Public Utilities.</li>
         <li>The largest leak in Weston was first recorded by National Grid<br>
in April 1999 and measures 14,400 ft2 – larger than 5 tennis courts.</li>
         <li>Over 320 trees were assessed as either already compromised or at risk due to their location in the leak zone. The cost of removing and replacing a dead tree can be $2-3,000.</li>
      </ul>
   </div>
</div>

Answer 1

处于 100% 高度的 iframe 将 span 推到了 div 之外。您可以删除高度并看到跨度将在 div 区域内。你可以做一些不同的事情来使 iframe 几乎全高，下面有文本。下面是一个使用计算高度的示例。

.gl-bot2-flex {
  display: flex;
  justify-content: space-between;
}

.gl-bot2-left,
.gl-bot2-right {
  width: 47%;
  border: 1px solid blue;
}

iframe {
  border: 0;
  height: calc(100% - 25px);
}

<div class="gl-bot2-flex">
  <div class="gl-bot2-left">
    <iframe src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" width="100%"><br />
      </iframe>
    <span class="gl-pin">click on pin to see further details of gas leak</span>
  </div>
  <div class="gl-bot2-right">
    <ul>
      <li>The Audit confirmed 292 unrepaired gas leaks in Weston: 66% more than reported by National Grid 12/31/18. 35% of Weston’s leaks are large volume leaks.</li>
      <li>Using the industry standard “leak extent” method, 102 of the leaks measured 2,000 ft2 or more. These large volume leaks are deemed of “Significant Environmental Impact” (G3SEI) according to the latest ruling by the Department of Public Utilities.</li>
      <li>The largest leak in Weston was first recorded by National Grid<br> in April 1999 and measures 14,400 ft2 – larger than 5 tennis courts.</li>
      <li>Over 320 trees were assessed as either already compromised or at risk due to their location in the leak zone. The cost of removing and replacing a dead tree can be $2-3,000.</li>
    </ul>
  </div>
</div>