如何用颜色填充左类div？答案

【问题标题】：How to fill left class div with color?如何用颜色填充左类div？
【发布时间】：2023-02-07 06:04:19
【问题描述】：

如果 right 类中有内容，我需要 .left 类完全填充红色。目前它没有完全填充左侧 div 的颜色？我相信问题出在身高上？我怎样才能实现它？

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
}

.right {
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

【问题讨论】：

为什么不在容器上设置背景红色呢？
因为在第二个 div 中不应该有颜色，所以我举了个例子

标签： html css

【解决方案1】：

只需在 .container 中将 align-items: center; 更改为 align-items: stretch;：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-items: stretch;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
}

.right {
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

【讨论】：