Html 什么'；这是一个简单的CSS方法来完成我的；交叉？“；

我想为这个留言板创建一个特殊的框/div，它将十字架的顶部添加到这个项目中。理想情况下，此解决方案将允许在栏的左侧显示一个小图片，并且横幅/徽标将占据顶部栏右侧的空间

我无法理解如何创建两个div元素，其中左侧为固定宽度，右侧填充剩余的浏览器空间。链接到测试站点：

#包装器{
位置：相对位置；
宽度：95%；
保证金：0自动；
边框：2倍实心#FF0000；
}
#标题{
文本对齐：居中；
高度：175px；
背景#FFFF80；
}
#内容,，
#页脚{
左边距：175px；
边框：1px实心#0000FF；
左边框：50px实心#0000FF；
}
#内容：之后{
内容：''；
位置：绝对位置；
宽度：400px；
左：0；
顶部：125px；
边框顶部：50px实心#0000FF；
}

广告牌横幅/标志在这里
你的董事会名称在这里

使用“css flex”，我希望它对你的问题有所帮助。 有好的网站可以学习

下面的代码是您可能想要执行的示例，我希望它能够回答您的问题

index.html

<div id="header" class="flex_container">
  <div class="flex_left">
    <img alt="picture" src="">
  </div>
  <div class="flex_right">
    board banner/logo goes here
    <h1>Your board name here</h1>
  </div>
</div>

---

不清楚问题是什么？是蓝十字没有划过整个宽度，还是这个问题与如何制作这个布局有关？我很难理解你想要达到的效果，你可以直观地表示你想要的结果是什么？我添加了一张图片，显示了我在说“完成十字”时所说的内容

.flex_container {
  display: flex;
}

.flex_left{
  min-width: 175px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 50px solid #0000FF;
}

.flex_right{
  width: 100%;
}