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

Question

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

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

是否有办法设置它，使 30rem 的最小宽度值保持不变，但当窗口尺寸减小时，它仍会在父元素内滑动(就像在达到最小宽度值之前所做的那样)？

这让我发疯。 (在代码 StackOverflow 代码片段中，您可能需要全屏查看问题)

代码笔: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>