CODEWITHSUNDEEP
cssflexbox
cts
cts

Reputation: 1084

Child div grow to full width of parent div

I'm having the issue that I want my container to have width 950px if possible - but if the window is resized then it will reduce down to the size of the window accordingly, currently if the window is resized it requires horizontal scrolling to see entire wrapper & container - what am I missing?

.wrapper {
  max-width: 950px;
  margin-right:  32px;
}

.container {
  background-color: teal;
  padding: 48px 64px 48px 64px;
  border: 1px solid grey;
  width: 100%;
  min-height: 414px;
}
<div class="wrapper">
  <div class="container"></div>  
</div>

Upvotes: 0

Views: 621

Answers (2)

Caliph Hamid
Caliph Hamid

Reputation: 345

You need to combine %-based width and pixel-based max-width for that, try this:

.wrapper {
  width: 90%;
  max-width: 950px;
  margin: 0 5%;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67738

Add box-sizing: border-box; to include the padding in the width, otherwise it will be added to the 100%, therefore exceeding the parent width.

.wrapper {
  max-width: 950px;
  margin-right:  32px;
}

.container {
  box-sizing: border-box;
  background-color: teal;
  padding: 48px 64px 48px 64px;
  border: 1px solid grey;
  width: 100%;
  min-height: 414px;
}
<div class="wrapper">
  <div class="container"></div>  
</div>

Upvotes: 2

Related Questions