最小宽度子元素 - 防止在重新调整大小时突破父容器

Question

我在父容器中有一个子元素，子元素的宽度为50％，最小宽度为30rem。

当我从右边开出窗口大小时，在子元素达到其最小宽度30rem后，它开始打破其包含/父元素，尽管有足够的可用空间。

无论如何设置它仍然保留30rem的最小宽度值，但是当窗口缩小时它仍然在父元素内滑动（就像在达到最小宽度值之前那样）？

它让我疯了。 （在代码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来调整左侧定位。这不是一个完美的解决方案，但我认为它实现了你所追求的目标。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;