最小宽度子元素——防止在调整大小时脱离父容器答案

【问题标题】：Min-Width Child Element— Prevent from breaking out of parent container on re-size最小宽度子元素——防止在调整大小时脱离父容器
【发布时间】：2018-11-09 12:23:07
【问题描述】：

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

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

是否有设置它以保持 30rem 的最小宽度值，但是当窗口缩小时，它仍会在父元素内滑动（就像在达到最小宽度值之前一样）？

它让我发疯了。（在代码 StackOverflow code-sn-p 中，您可能需要全屏查看问题）

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>

【问题讨论】：

但是没有足够的空间....全尺寸，35%（左边距）+ 50%（宽度）= 85%，但是一旦你开始变小，它是 35% + 30rem （这 30rem 显然是超过 50%，否则就没有必要拥有它）......然后它超过 100%......？无论如何，期望的行为是什么？
我希望暗箱保持最小宽度大小，但继续移动到其左侧可用的空闲空间。
那么你需要使用calc作为左边距
left:calc(65% - 30rem)?
@Paulie_D 谢谢，那行得通。如果您想将其发布为答案，我会将其标记为正确。不过，我仍然无法完全理解它的工作原理/原因。

标签： html css width

【解决方案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>

【讨论】：