Fit all elements within viewport without scrolling

Question

I'm trying to design a section of HTML/CSS wherein I have a flexbox parent element that is the width and height of the starting viewport with 3 child text boxes.

My goal is to have all 3 elements on the page and visible without needing to scroll.

My goal is to have all 3 text boxes be legible and resize accordingly to the given viewport without getting shoved out.

Looking at the HTML, it seems the content is shoved off the viewport to the right despite trying to keep the width at 100%. Basically, how can I have 3 easily modifiable flexbox that stay legible and within the width and height of the viewport no matter what changes are made to them?

My code:

.intro_header {
  display: flex;
  width: 100%;
  padding: 10% 10% 5% 10%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  flex-wrap: wrap;
  justify-content: space-between;
}


/* Generic flexbox paragraph text div that can be used for one column display regardless of responsiveness */


/*can swap around elements using the order: style */

.oneColumnText {
  width: 100%;
  text-align: center;
}

<div class="intro_header" style="background-image: foo.jpg">

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis
      felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
    </p>
  </div>
</div>

https://jsfiddle.net/eg14v3po/1/

maybe try adding `box-sizing: border-box;` so your `padding: 10% 10% 5% 10%;` is calculated with your width — zgood, Jan 11 '18 at 01:05

Michael Benjamin · Accepted Answer · 2018-01-11T01:15:05.070

Add this to your code:

* { box-sizing: border-box; }

body { margin: 0; }

.intro_header {
  display: flex;
  padding: 10% 10% 5% 10%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  flex-wrap: wrap;
  justify-content: space-between;
}

.oneColumnText {
  width: 100%;
  text-align: center;
}

*    { box-sizing: border-box; }
body { margin: 0; }

.oneColumnText {
  border-bottom: 1px solid lightgray; /* for demo only */
}

<div class="intro_header" style="background-image: foo.jpg">

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="oneColumnText">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis
      felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
    </p>
  </div>
</div>

With the border-box value of the box-sizing property, the padding you have specified gets factored into the width / height calculations (more details).

With margin: 0 on the body element you are overriding the default margins set by the browser (more details).

Fit all elements within viewport without scrolling

1 Answers1