justify-content: пробел между не работает после добавления ширины к элементу

Question

У меня есть flex-контейнер с двумя элементами div, которые я хочу располагать слева и справа от контейнера.justify-content: space-between; отлично работает, когда я не устанавливаю ширину элемента.Я хочу, чтобы один из элементов имел ширину 40%.При добавлении width: 40%; этот элемент смещается к центру.

Я пытался заменить width на flex-basis и max-width, но это не сработало.

.product-container {
  background: #ecefef;
}
.product {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.product-image {
  width: calc(60rem/1.6);
}
.product .content {
  font-size: calc(1.6rem/1.1);
  width: 40%;
}
.title-text {
  color: #000041;
  font-size: calc(3rem/1.5);
  font-family: circular-bold, sans-serif;
  margin: 50px 0;
}

<div class="product-container">
      <div class="product">
        <a name="lorem"></a>
        <div class="content">
          <div class="title-text">Lorem Ipsum</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       </div>
        <div>
            <img class="product-image" src="https://lorem.com" alt="lorem">
        </div>
      </div>
    </div>

Я ожидаю, что content будет слева от flexbox даже после добавления свойства width.Однако он смещается к центру гибкой коробки, несмотря на наличие justify-content: space between; на контейнере.

Answer 1

У вас есть элемент a перед элементом content, и когда вы устанавливаете ширину, этот элемент также влияет на расположение элементов в product, установленном space-between, а content является вторым элементом, поэтому он позиционируется в центр.

Одно из решений - удалить элемент a, если он вам не нужен, а другое - использовать margin-right: auto для content элемента.

.product-container {
  background: #ecefef;
}

.product {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.product-image {
  width: calc(60rem/1.6);
}

.product .content {
  font-size: calc(1.6rem/1.1);
  width: 40%;
  margin-right: auto;
}

.title-text {
  color: #000041;
  font-size: calc(3rem/1.5);
  font-family: circular-bold, sans-serif;
  margin: 50px 0;
}

<div class="product-container">
  <div class="product">
    <a name="lorem"></a>
    <div class="content">
      <div class="title-text">Lorem Ipsum</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div>
      <img class="product-image" src="https://lorem.com" alt="lorem">
    </div>
  </div>
</div>

Answer 2

Я упростил макет, используя flex, а также пытался управлять макетом, используя,

flex-basis: 40%;

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: flex-start;
}

.left {
    text-align: center;
    order: 0;
    flex-basis: 40%;
    align-self: auto;
    height: 100px;
    background-color: aqua;
}

.right {
    text-align: center;
    order: 0;
    flex-basis: 60%;
    align-self: auto;
    height: 100px;
    background-color: rgb(0, 153, 255);
}

<div class="flex-container">
    <div class="left">
        <h3>left</h3>
    </div>
    <div class="right">
        <h3>right</h3>
    </div>
</div>