how can you make 2 boxes stay the same size?-CodePudding

sorry if the title is confusing, i don't know much about html. i'm wondering if there's a way you can make these two boxes stay the same size even if the content in one makes it bigger than the other? like, is there a way to make the smaller box mirror the bigger one's size, even if it has less stuff in it? html btw

attaching what i have as the coding right now; i think the reason i can't find an answer is because i don't really know how to ask the question, so i hope this makes sense to y'all. link to the coding i have right now thanks in advance for any help :}

CodePudding user response：

you can use min and max height and width to control that, but don't forget to manage other things like word wrap and overflow properly.

div {
    border: 1px solid;
    margin: 5px;
    word-wrap: break-word;
   
}
.box1 {
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    max-height: 200px;
}
.box2 {
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    max-height: 200px;
}

 <div >texttexttexttexttexttexttexttexttext</div>
 <div >texttexttexttexttexttexttexttexttexttext
  texttexttexttexttexttexttexttexttexttexttexttexttexttexttext
  texttexttexttexttexttexttexttexttexttexttexttexttexttext
 </div>

CodePudding user response：

automatic box height increase when content add in single box.
<style>
        .box-wrap {
            display: flex;
            justify-content: stretch;
        }

        .box {
            padding: 20px;
        }
    </style>

    <div >
        <div  style="background-color: red;">
            Lorem ipsum
        </div>
        <div  style="background-color: green;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium provident architecto facilis quasi
            iusto
            voluptatem voluptate. Deserunt, voluptatum, ratione obcaecati nostrum corporis totam temporibus dolore
            quia
            harum impedit sit ex?
        </div>
        <div  style="background-color: yellow;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium provident architecto facilis quasi
            iusto dsfjklsajf sdafjla fljsdlaf asfljlkasjdf lasfjkl asfjkl
            voluptatem
            voluptate. Deserunt, voluptatum, ratione obcaecati nostrum corporis totam temporibus
        </div>