Html Flex：图像跨越2个div，而不是仅出现在1个div下面

我正在尝试使用flexbox，所以我对它有点陌生。不管怎样，我正在努力 让3个div彼此相邻，我希望一个div上的所有图像和另一个div中的文本

我现在用两个div试一试。目前，我得到的图像跨越2个div，而不是一个div。 我做错了什么？我需要处理利润吗

#母公司{
显示器：flex；
}
#狭窄的{
宽度：20%；
背景：浅蓝色；
/*只是为了让它可见*/
}
#宽阔的{
宽度：20%；
/*长到容器的其余部分*/
背景：浅绿色；
/*只是为了让它可见*/
}
（图片）
文本（200px）

你说“成长到容器的其余部分”，但你没有做任何事情来实现这一点

---

flex grow

的默认值是

0

，因此它不会增长。如果您希望内容扩展，请将其设置为

1

。

我理解了您的问题，我试图得到答案。我在你的img标签上添加了一个css属性

<style>
  #parent {
    display: flex-grow;
  }

  #narrow {
    width: 20%;
    background: lightblue;
    /* Just so it's visible */
  }

  #wide {
    width: 20%;
    /* Grow to rest of container */
    background: lightgreen;
    /* Just so it's visible */
  }

  .imageright{
     width:100%; 
  }
  }
</style>


<div id="parent">
  <div id="wide">images) <img class="imageright" src="https://placehold.it/300x200" /></div>
  <div id="narrow">text (200px)
  </div>
</div>

#母公司{
显示：flex-grow；
}
#狭窄的{
宽度：20%；
背景：浅蓝色；
/*只是为了让它可见*/
}
#宽阔的{
宽度：20%；
/*长到容器的其余部分*/
背景：浅绿色；
/*只是为了让它可见*/
}
.对{
宽度：100%；
}
}
（图片）
文本（200px）

---

请告诉我这是否是您所期望的。

啊，是的，我现在明白了。但我不希望它总是覆盖我的整个页面。至少在宽度方面。所以我还得和利润率打交道？嗯，现在利润率低于其他水平。我希望两个div相邻，但正如我在其他评论中看到的，我必须在flex grow中添加1

  #wide {
    width: 20%;
    /* Grow to rest of container */
    background: lightgreen;
    /* Just so it's visible */
  }

<style>
  #parent {
    display: flex-grow;
  }

  #narrow {
    width: 20%;
    background: lightblue;
    /* Just so it's visible */
  }

  #wide {
    width: 20%;
    /* Grow to rest of container */
    background: lightgreen;
    /* Just so it's visible */
  }

  .imageright{
     width:100%; 
  }
  }
</style>


<div id="parent">
  <div id="wide">images) <img class="imageright" src="https://placehold.it/300x200" /></div>
  <div id="narrow">text (200px)
  </div>
</div>