Prevent Child Div from Overflowing Parent Div

Prevent child div from overflowing parent div

You could simply set the container to flexbox.

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}

jsFiddle

#cont {

  padding: 5px;

  background-color: red;

  max-height: 150px;

  max-width: 50%;

  display: flex; /*added*/

  flex-direction: column; /*added*/

}

#body {

  background-color: blue;

  overflow-y: auto;

  overflow-x: hidden;

  flex: 1; /* added */

}

#head {

  background-color: green;

}

<div id='cont'>

  <div id='head'>

    <div>Head</div>

  </div>

  <div id='body'>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

    <div>Body</div>

  </div>

</div>

How to prevent child div overflow out of parent div on changing CSS zoom property?

Try To Set overflow: scroll; on outer div

#main {  position: relative;overflow: scroll;}

Prevent child div from expanding outside of parent?

You can change your #insideDiv's max-height CSS property from 100% to inherit. So this rule will be like this:

max-height: inherit;

You also might want to add box-sizing:border-box; if you go this route, as that will allow any borders or padding on #insideDiv to behave as (probably) desired.

---

The cause of this issue is that max-height:100%; looks for the parent's height, not its max-height for how tall it's allowed to be. Thus, you end up with the classic non-deterministic relative height problem. If you give the parent a deterministic height (rather than max-height), 100% can resolve deterministically.

prevent child div to overflow parent div css/tailwindcss

You should be able to achieve this by adding some CSS to your table and input controls.

Apply width: 100% to both the tale and input controls. Then you can use table-layout: fixed and box-sizing: border-box to size the controls and table inside the container.

/* ignore .w-full css - it's used to set the width for this demo */
.w-full {
  width: 600px;
  border: 1px solid green;
}

table {
  table-layout: fixed;
  width: 100%;
}

td input {      
  box-sizing: border-box;
  width: 100%;
}

<div class="p-10 w-5/12 text-center">
  <div class="border-2 border-solid border-indigo-300 p-3 rounded shadow-2xl">
    <h2>Spielfeld 1</h2>
    <div class="h-96 border border-solid border-indigo-300 rounded flex">
      <div class="w-full">
        <table>
          <tr>
            <th>Name</th>
            <th>Runter</th>
            <th>Frei</th>
            <th>Hoch</th>
            <th>Neiba</th>
          </tr>
          <tr>
            <td>1</td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

How to prevent child div from resize?

Try adding flex: 0 0 25% this property in child element

#parent-box{
    height: 300px;
    width: 500px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: red;
}
.child-box {
    height: 100px; 
    margin: 10px;
    resize: none;
    background: yellow;  
    flex: 0 0 100px;
}

   <div id="parent-box">
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
        <div class="child-box"></div>
</div>

---

Related Topics