如何将flexbox flex项目图形包含在包含figcaptions以外的文本时进行换行

Question

布局有一系列带有字幕的图像，然后是下面的更多文字。当它只是标题时，图像会根据flex: auto;规则进行换行，这就是我的意图。当我添加足够的文本，使其比图像宽时，无论图像有多宽，图像都会占据整个屏幕的宽度。

这是CodePen。我尝试在<p>中包装<div>元素并使用display: inline;设置样式，但它没有帮助。也没有将文本包装在<span>元素中。我已经使用flexbox样式显示了父元素，因为我不确定它是否会影响结果。如何让这些数字继续使用flex: auto;尺寸？

如果您点击“完整页面”，则会在代码段中显示该行为。

＆＃13;

＆＃13;

html {
  color: #f7f7dc;
  background: black;
 }

section {
  display: flex;
  padding: 15px;
  flex: 3 0 350px;
  flex-direction: column;
  margin-top: 3vw;
  margin-left: 6vw; }


.outerDiv {
  background-color: rgba(50, 50, 0, 0.6);
  border-radius: 2rem;}

.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  border-radius: 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px; }
  .innerDiv p {
    padding: 6px 18px 0 15px; }

.pixWrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin: 15px; }
  .pixWrap div p {
    margin: 5px;
    padding: 10px; }

.pix {
  margin: 1vw;
  flex: auto;
  align-items: center;
  border: 1px solid #505000; }
  .pix img {
    width: 100%;
    height: auto; }

figcaption {
  font-size: 0.8rem;
  letter-spacing: 1px;
  line-height: 1.1rem;
  text-align: right;
  width: 90%; }

＆＃13;

  <section>
    <div class="outerDiv">
      <div class="innerDiv">
        <div class="pixWrap">
          <figure class="pix">
            <img src="http://www.moonwards.com/img/kreep.jpg">
            <figcaption>Map of nighttime soil temperatures
            </figcaption>
            <div>
              <p>
                Large rocks stores heat better than small grains. 
              </p>
            </div>
          </figure>
          <figure class="pix">
            <img src="http://www.moonwards.com/img/NightTempLalande.png">
            <figcaption>Evening image of the colony site by the Lunar Reconnaissance Orbiter.
            </figcaption>
            <div>
              <p>
                This image shows how the density of the regolith (the soil) changes with depth. BUNCH OF EXTRA TEXT, BUNCH OF EXTRA TEXT, LALALALALALALALALALALALAAL
              </p>
            </div>
          </figure>

          <figure class="pix">
            <img src="http://www.moonwards.com/img/Teacup250.jpg" alt="Lalande Crater east wall
						below rim Lunar Reconnaissance Orbiter image at noon showing
						flows of debris and depth of stony outcroppings">
            <figcaption>Noon image near the colony site. Also by the LRO,
            </figcaption>
            what happens if i do this? 
          </figure>
          <figure class="pix">
            <img src="http://www.moonwards.com/img/Thumb-Lunar_Thorium_hotspots.jpg">
            <figcaption>captions coming</figcaption>
          </figure>
          <figure class="pix">
            <img src="http://www.moonwards.com/img/Lal-boulders1.jpg">
        </div>
      </div>
    </div>
  </section>

＆＃13;

＆＃13;

＆＃13;