CODEWITHSUNDEEP
htmlcsswidth
pjk_ok
pjk_ok

Reputation: 947

Min-Width Child Element— Prevent from breaking out of parent container on re-size

I have a child element inside a parent container, the child has element a width of 50%, and a min-width of 30rem.

When I bring the window size in the from the right, after the child element hits its min-width of 30rem it starts to break its containing / parent element, despite there being plenty of available space.

Is there anyway of setting it so the min-width value of 30rem remains, but when the window is reduced in size it still slides inside the parent element (like it does before the min-width value is hit)?

It's sending me nuts. (In the code StackOverflow code-snippet you'll probably need to view full screen to see the issue)

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>

Upvotes: 0

Views: 481

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

You'll have to use calc to adjust the left positioning. This is not a perfect solution but I think it achieves what you are after.

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>

Upvotes: 1

Related Questions