Stop Div Resizing Parent Div Using CSS

stop div resizing parent div using css

Here is a demo, but you should really explain: do you want the height to be variable ?

jsFiddle demo

edited CSS (only changed elements):

#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display:block;         /**/
    float:left;            /**/
    overflow:hidden;       /**/
    padding-bottom:24px;   /**/
}
.post .post-info span{
    position:absolute;     /**/
    word-wrap:break-word;
} 

P.S: this question associates me to an old answer of mine :)

Pop Images like Google Images

If you need help ... I'm here

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>

CSS - Prevent div content from resizing parent

From MDN:

The fr unit as a unit which represents a fraction of the available
space in the grid container.

Swapping auto with frs solves your problem.

Edit: For the height to remain equal (but not fixed), I'm using the minmax function. I'm telling the grid that each cell must be at least its default size of auto and, at most, 1 equal fraction of the grid. The result is what you're after. If one cell contains a lot of text and grows quite a bit, the other cells will be fractionally equivalent to whatever the largest cell has grown to.

.grid-container {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: repeat(3, minmax(auto, 1fr));  padding: 10px;}
.grid-block {  border: 1px solid;  padding: 16% 0 16%;  margin: 20px;  text-align: center;}

<div class="grid-container">  <div class="grid-block">1</div>  <div class="grid-block">Lots of text in here</div>  <div class="grid-block">3</div>  <div class="grid-block">Lots and lots and lots and lots of text in here as well</div>  <div class="grid-block">5</div>  <div class="grid-block">6</div>  <div class="grid-block">7</div>  <div class="grid-block">8</div>  <div class="grid-block">9</div></div>

Stop div container from resizing

There is many way to achieve that. First of all, the easiest would be to put the css value min-width! So if you want it to resize but to stop at 960px (for example) you just have to do :

    myCoolDiv{
         width: 100%;
         height: 50%;
         min-width: 960px;
   }

That would give you the best result. Else, if you dont want content to resize at all, and the selector to have a width equal to 100% of the initial screen, I would use jQuery that way:

    $(document).ready(function() {
       //Call a variable to know the width of the window
       var screenWidth = $(window).width();
       $('myCoolDiv').css('width', screenWidth + 'px');
    });

Hope it helped! Tell me if my answer is not clear enough or if you don't understand a part of it!

Cheers!

css: inline css to stop content from resizing parent

You need to change the display property of the span to inline-block

Demo

.msg{
  display: inline-block;
}

Prevent Image from resizing div

Give the parent div a px or rem or vh for height instead of percentage. Thats it.

.border { border: 5px inset blue; height: 200px !important; }

---

Related Topics