如何为flex内的项目设置宽度

Question

我有这样的代码

.divA {
  background: red;
  width: 500px;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
}

.epi {
  width: 50%;
  background: blue;
}

<div class="divA">
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
</div>

我希望如此

但是我得到了

我希望.divA中的项目的宽度为.divA的50％

Answer 1

编辑：由于您不希望包装它，而是水平滚动，因此可以将其设置为overflow-x: scroll;

.divA {
  background: red;
  width: 500px;
  display: flex;
  justify-content: flex-start;
  overflow-x: scroll;
  overflow-y: auto;
}

.epi {
  min-width: 50%;
  background: blue;
}

<div class="divA">
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
</div>