Html Question posted in
Some basic documentation can be found here.

Html – CSS: div overflows over parent div

I have text wrapped inside a div, and I want this div to have a border and padding, but apparently the parent div doesn’t adapt to the child size.

.section {
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.container {
  margin: auto;
  height: 70%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.text-border {
  margin: auto;
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  border: 7px solid #8ec087;
  padding: 5% 7%;
  width: 100%;
  box-sizing: border-box;
}

.title {
  font-family: "Montserrat";
  color: white;
  text-shadow: 0 0 25px #223828b1;
  font-size: 3vw;
  font-weight: 700;
  margin: 0 auto 0 auto;
  display: block;
  white-space: nowrap;
  /* WITHOUT THIS LINE THE TEXT WRAPS */
}
<div class="section">
  <div class="container">
    <div class="text-border">
      <p class="title">FLORICOLTURA ENF</p>
      <p class="subtitle">di Ernesto Santelli</p>
    </div>
    ...
  </div>
</div>

Here what it looks like.

Even without border-boxes it doesn’t show what I really want. I want the text to not be wrapped (so to be in one line), the section and container to resize based on the one-line text AND the padding of the text-border.

Tags:

2

Answers


  1. 0

    The box-sizing property allows us to include the padding and border in an element’s total width and height.

    If you set box-sizing: border-box; on an element, padding and border are included in the width and height.

    reference:https://www.w3schools.com/css/css3_box-sizing.asp

    Login or Signup to reply.
  2. 0

    Updated answer:

    You are using too many divs in your markup. div within a div is a tricky thing, unless you know what you are doing with it. Unless you have specific need for the div.container, remove it.

    .section {
            height: 100%;
            margin: auto;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        .text-border {
            margin: auto;
            display: flex;
            flex-direction: column;
            border-radius: 40px;
            border: 7px solid #8ec087;
            padding: 5% 7%;
            /* width: 100%; */
            box-sizing: border-box;
        }

        .title {
            font-family: "Montserrat";
            color: white;
            text-shadow: 0 0 25px #223828b1;
            font-size: 3vw;
            font-weight: 700;
            margin: 0 auto 0 auto;
            display: block;
            white-space: nowrap;
            /* WITHOUT THIS LINE THE TEXT WRAPS */
        }
    <div class="section">
            <div class="text-border">
              <p class="title">FLORICOLTURA ENF</p>
              <p class="subtitle">di Ernesto Santelli</p>
            </div>
            ...
        </div>

    Old answer:

    what you want here is to allow the div.text-border to expand with its content. what you specify width: 100% to it, it is limited to 100% of the parent, and not the space it needs.

    remove the width style from .text-border and it should work fine:

            .text-border {
            margin: auto;
            display: flex;
            flex-direction: column;
            border-radius: 40px;
            border: 7px solid #8ec087;
            padding: 5% 7%;
            /* width: 100%; */
            box-sizing: border-box;
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search