Дочерний элемент минимальной ширины. Предотвращает разбивание родительского контейнера при изменении размера.

Question

У меня есть дочерний элемент внутри родительского контейнера, дочерний элемент имеет ширину 50% и минимальную ширину 30 мм.

Когда я переношу размер окна справа, после того, как дочерний элемент достигнет минимальной ширины 30rem, он начинает ломать свой содержащий / родительский элемент, несмотря на наличие большого свободного места.

Есть ли в любом случае его установка таким образом, чтобы значение min-width 30rem оставалось, но когда окно уменьшается в размере, оно все равно скользит внутри родительского элемента (как это происходит до попадания в значение min-width)?

Это сводит меня с ума.(В фрагменте кода StackOverflow вам, вероятно, потребуется просмотреть весь экран, чтобы увидеть проблему)

Codepen: https://codepen.io/emilychews/pen/wXBdvz

body {margin: 0; 
  padding: 0;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  height: 100vh;
}

.tl {color: white;}

.section {
    position: relative;
    display: flex;
    margin: 0 auto; 
    width: 100%;
    box-sizing: border-box;
    padding: 2.48832rem 0;
}

.row {
    position: relative;
    justify-content: center;
    margin: auto;
    width: 80%;
    box-sizing: border-box;
    background: blue;
    width: 90%;
    right: 5%;
    justify-content: flex-start;
    padding: 4.299rem 0;
}

.one-col.col-1 {
    position: relative;
    width: 50%;
    margin: 0;
    padding: 3.583rem 2rem;
    left: 40%;
    background: #172731;
    min-width: 30rem;
    top: 7rem;
    color: white;
}

<section class="section">
  <div class="row">
    <div class="one-col col-1">
      <h3 class="tl">Title</h3>
      <h3 class="tl"><span id="customerbase">Do your thing</span></h3>
      <hr>
      <p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
      <p><a class="seework" href="#">SEE WORK</a></p> 
    </div>
  </div>
</section>

Answer 1

Вам нужно будет использовать calc, чтобы отрегулировать левое положение.Это не идеальное решение, но я думаю, что оно достигает того, что вы ищете.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.tl {
  color: white;
}

.section {
  position: relative;
  display: flex;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 2.48832rem 0;
}

.row {
  position: relative;
  justify-content: center;
  margin: auto;
  width: 80%;
  box-sizing: border-box;
  background: blue;
  width: 90%;
  right: 5%;
  justify-content: flex-start;
  padding: 4.299rem 0;
}

.one-col.col-1 {
  position: relative;
  width: 50%;
  margin: 0;
  padding: 3.583rem 2rem;
  left: calc(60% - 30rem);
  background: #172731;
  min-width: 30rem;
  top: 7rem;
  color: white;
}

<section class="section">
  <div class="row">
    <div class="one-col col-1">
      <h3 class="tl">Title</h3>
      <h3 class="tl"><span id="customerbase">Do your thing</span></h3>
      <hr>
      <p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p><a class="seework" href="#">SEE WORK</a></p>
    </div>
  </div>
</section>