Ensure Flex Container Inner Div Maintains Its Dimension On Window Resize - CSS

Question

I have a flex container which contains an inner div (red square) and some text in a separate paragraph tag.

When the window size is reduced to mobile sizes, the inner div (red square) reduces in size despite having width and height properties set in CSS.

How do I make it so the inner div (red square) keeps its dimensions on smaller window sizes (via the text wrapping on to other lines ?).

CodePen

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.adbox-center {
  background: lightgrey;
  display: flex;
  padding: 1rem;
  align-items: center;
  width 50%;
}

.redsquare {
  margin-right: 1rem;
  height: 50px;
  width: 50px;
  background: red;
}

<div class="adbox-center">
  <div class="redsquare"></div>
  <p><b>Word</b> — Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

Answer 1

Use min-width and min-height instead of using height and width this will not let the div's width and height to go under the adjusted measurement

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.adbox-center {
  background: lightgrey;
  display: flex;
  padding: 1rem;
  align-items: center;
  width 50%;
}

.redsquare {
  margin-right: 1rem;
  min-height: 50px;
  min-width: 50px;
  background: red;
}

<div class="adbox-center">
  <div class="redsquare"></div>
  <p><b>Word</b> — Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>