在不滚动的情况下调整视口内的所有元素

Question

>我正在尝试设计 HTML/CSS 的一部分，其中我有一个 flexbox 父元素，它是带有 3 个子文本框的起始视口的宽度和高度。

我的目标是让页面上的所有 3 个元素都可见，而无需滚动。

我的目标是让所有 3 个文本框都清晰易读，并根据给定的视口调整大小，而不会被推出。

查看 HTML，尽管试图将宽度保持在 100%，但内容似乎被推离了右侧的视口。 基本上，我如何拥有 3 个易于修改的弹性框，无论对它们进行什么更改，它们都保持清晰易读并在视口的宽度和高度范围内？

我的代码：

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

Answer 1

将此添加到您的代码中：

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

使用 box-sizing 属性的border-box值，您指定的padding将计入width/height计算(更多详细信息(。

body元素上margin: 0时，您将覆盖浏览器设置的默认边距(更多详细信息(。