CODEWITHSUNDEEP
htmlcssflexbox
CMig
CMig

Reputation: 69

div with min-width growing with it's content

I am a CSS/HTML auto learner, apologies if my question is stupid.

I want a div which is 40% wide minimum with its content justified but when more items will be added in this div its width grows accordingly.

This is what I have so far:

.hcontainerbutton {
    display: flex;
    width: 40%;
    background-color: blue;
    align-items: center;
    justify-content: space-around;
    right: 30%;
    left: 30%;
    position: absolute;
    bottom: 0!important;
}

both with width:40% or min-width:40% the div doesn't grow if I add more items into it

Upvotes: 3

Views: 3500

Answers (2)

sol
sol

Reputation: 22949

  1. Wrap .hcontainerbutton in a container and apply flexbox and height properties to it. This can be used to position .hcontainerbutton instead of position: absolute.

  2. Add min-width value to .hcontainerbutton

You can test this layout by adding and remove .content divs and viewing in full screen.

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.hcontainerbutton {
  min-width: 40%;
  background-color: blue;
  display: flex;
  justify-content: space-around;
  margin-top: auto;
}

.content {
  background: pink;
  width: 100px;
  height: 100px;
}
<div class="container">
  <div class="hcontainerbutton">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

Upvotes: 2

Naren Murali
Naren Murali

Reputation: 56650

Based on your requirements, this can be done with normal CSS itself, you need not go for flex, Here is an explanation on what is done.

First we set the width and height of html and body tag, then using margin:0px remove the margins set by the browser.

html,
body {
  width: 100% height: auto;
  margin: 0px;
}

Now the parent that will wrap the centered div will have to have the CSS property text-align:center, basically what this does is, it will center align elements with display property inline-block.

.parent {
  text-align: center;
}

Then coming to the main div, which has the class hcontainerbutton, we can set the max-width(in the example I use 40%) and min-width(in the example I use 80%) to whatever is needed. The CSS property display:inline-block ensures it takes the width of the content alone. The CSS property word-wrap:break-word ensures the text is broken and maintains the widht of the div.

Below is a working snippet of the code.

html,
body {
  width: 100% height: auto;
  margin: 0px;
}

.parent {
  text-align: center;
}

.hcontainerbutton {
  word-wrap: break-word;
  min-width: 40%;
  max-width: 80%;
  display: inline-block;
}
<div class="parent">
  <div class="hcontainerbutton"> asdf
  </div>
  <div class="hcontainerbutton"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend magna augue. Morbi sagittis eu urna et facilisis. Nam finibus erat justo, vel porta magna aliquam a. Pellentesque faucibus molestie libero vitae condimentum. Nunc condimentum tincidunt
    nulla, id suscipit magna dignissim id. Nulla dapibus suscipit velit et viverra. Mauris non gravida justo. Sed efficitur eleifend elementum. Integer non mattis mi. Etiam vestibulum viverra erat, eget dapibus tellus iaculis ut. Mauris ullamcorper magna
    sapien, ac gravida odio blandit varius. Fusce eu placerat enim. Etiam nec elementum dui. In fermentum massa sed augue interdum aliquam. Nunc lacinia blandit elit a iaculis.
  </div>
</div>

Upvotes: 1

Related Questions