How to fit content on div width and height when adding padding, not letting scrollbars appear

Question

Here is my html/css containers structure:

.page {
  height: 100%;
  width: 100%;
}

.rowcontainer {
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.container {
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

<div class="pagecontainer">

  <div class="container">
    <h1>Line at Top</h1>
    <div class="rowcontainer">
      <div class="container">
        THIS IS THE LEFT TEXT </div>
      <div class="container">
        THIS IT THE RIGHT TEXT THAT OVERFLOWS THE WIDTH AND SHOW THE HORIZONTAL SCROLLBAR, THAT IS NOT DESIRED
      </div>
    </div>
    <h1>Line at Bottom</h1>
  </div>
</div>

Because of the paddings, both vertical and horizontall scrollbars appears.

How can I avoid these scrollbars, forcing the inner div to fit in the available width and height?

you need to use box-sizing property of css, box-sizing: border-box; to be more precise, add that to your parent div and it will do what you want — Giorgi_Mdivani, Nov 14 '19 at 19:16
(1) you don't need to define with in most of the case because the default behavior is full width for block element (2) percentage height need a reference to work (3) you need to consider box-sizing to include padding (4) you need to consider the default margin of body [added 3 duplicates] — Temani Afif, Nov 14 '19 at 19:20

score 1 · Accepted Answer · answered Nov 14 '19 at 19:17

Adjust the box sizing of your html like this:

* {
  box-sizing: border-box;
}

.page {
  height: 100%;
  width: 100%;
}

.rowcontainer {
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.container {
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

<div class="pagecontainer">

  <div class="container">
    <h1>Line at Top</h1>
    <div class="rowcontainer">
      <div class="container">
        THIS IS THE LEFT TEXT </div>
      <div class="container">
        THIS IT THE RIGHT TEXT THAT OVERFLOWS THE WIDTH AND SHOW THE HORIZONTAL SCROLLBAR, THAT IS NOT DESIRED
      </div>
    </div>
    <h1>Line at Bottom</h1>
  </div>
</div>

score -1 · Answer 2 · answered Nov 14 '19 at 19:17

add this to your css

* {
  box-sizing: border-box;
}

by default if you have element with width - 100px, border 2px and padding 10px actual width of the element will be 124px, by adding border-box rule to your style you are telling css to fit paddings and borders in elements set width/height.

How to fit content on div width and height when adding padding, not letting scrollbars appear

2 Answers2