Last Updated
Viewed 07 Times
     

I have a trouble about flex item in css.

Please see the folloing code in jsfiddle.

https://jsfiddle.net/mitsuru793/n0y6g5qu/32

html

<html>
<head>
</head>
<body>
<div class="main">
  <div class="main-flex-container">
    <div class="text">text</div>
    <div class="image-flex-container">
      <div class="label">label</div>
      <img src="https://dummyimage.com/200x400/ff0000/ffffff">
    </div>
  </div>
</div>
</body>
</html>

scss

.main {
  width: 80%;
  height: 100px;

  color: white;
}

.main-flex-container {
  display: flex;
  height: 100%;
  background-color: green;
  .text {
    width: 100%;
    background-color: orange;
  }
}

.image-flex-container {
  display: flex;
  .label {
    background-color: #0000aa;
  }
  img {
    height: 100%;
  }
}

This code renders different on each browsers. My os is macOs Mojave 10.14.6.

rendering image

The redering result by opera is that I was expected. Why does other browsers render wrong? Is this bug?

Red area is a img tag and image. This must be shrunken by orange are which has 100% width. However, in not opera, the width of red area(image) is original image width. I want the width to be shrunken.

Problem :

  • To make a vertical line which separates two objects but it won't appear because it doesn't have height although I added height: 100%.
  • Why isn't it filling up the space from the top to the bottom of my div? Is it because .card-body has height: auto?


Tried Cases :

  • I already tried adding width, disabling flex-box but nothing of that worked, but if I add a specific height to my .card-body it works.


Do you know a solution how it could work without adding a specific height?

.card {
  margin-bottom: 30px;
}

.card > .card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card > .card-header.light {
  color: #fff;
}

.card > .card-body {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}

.card > .card-body.server-status {
  display: flex;
  align-items: center;
}

.card > .card-body.server-status > .counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card > .card-body.server-status > .counter > span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}
        <div class="card">
          <div class="card-header light">
            Active Services
          </div>
          <div class="card-body server-status">
            <div class="counter">
              7/9
              <span>
                Servers running
              </span>
            </div>
            <div style="border-left:1px solid #0d2c4a;height:100%;"></div>
            <div class="chart">

            </div>
          </div>
        </div>

This question already has an answer here:

I'm working on a navigation bar for a page using only HTML and CSS. It should look like this, with the logo setting the height of the containing div, then with the text vertically centered in other divs next to it.

What it should look like:

What it should look like

I've tried to do this by setting up some nested flex boxes. The idea is that:

  • The container (nav-holder) stretches to fit the tallest content
  • The second container (nav-item) should all be as tall as its parent
  • The third container (nav-cont) should be as tall as its own content, and should be vertically centered inside nav-item

Instead, I'm ending up with an odd extra bit of space at the bottom of my logo inside nav-cont, and I can't work out where it's coming from.

It looks like this:

What it really looks like:

What it really looks like

HTML code:

<div id="header">
    <div id="nav-holder">
        <div class="nav-item">
            <div class="nav-cont"><img src="images/placeholder-logo.jpg"/></div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Listings</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Services</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">About</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Blog</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Contact</div>
        </div>
    </div>
</div>

CSS Code:

#nav-holder {
    background-color: blue;
    display: flex;
}

.nav-item {
    background-color: yellow;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
}

.nav-cont {
    background-color: green;
}

Attempted fixes:

  • Checked to see if there was a margin or padding set for images or for divs in general.
  • Looked for information in the most similar solved problem on StackOverflow ("CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height")
  • Went through a couple of flexbox tutorials to see if there were any similar issues described, including "Solved by Flexbox" on GitHub and "Dive into Flexbox" by Greg Smith

I've got a pretty good adjustable interface working with flexbox where a user can adjust the height and width of panels. However, I want to change the panel heights, which currently use pixels, to use percentage, so when they change one panel, the other panels flow.

Everything works fine for widths, but when I use height % it breaks.

Here's a fiddle showing the broken %.

http://jsfiddle.net/59trW/1/

This fiddle has a 50% height set on the red element, but it isn't visible at all.

here's the css

.outer-flex {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    display: flex;
    -webkit-box-align: stretch;
    flex-direction: row;
}
.left-panel {
    width: 30px;
    background-color: #5eddd8;
}

.flex {
    display: flex;
    flex:1;
    -webkit-box-align: stretch;
    flex-direction: column;
    background-color: #64b92a;
    min-height: 1px;
}

.fixed {
    height: 20px;
    background-color: #ecf0f1;
}
.top-box {
    height: 30%;
    background-color: red;
}

.bottom-box {
    flex: 1;
}

And the html

    <div class="outer-flex">
    <div class="left-panel">
      this is ok.
    </div>
   <div class="flex">
       <div class="fixed">doesn't move</div>
      <div class="top-box">top box</div>
      <div class="bottom-box">bottom box</div>
    </div>
</div>

I'm hoping there is a small change I can make to have the div be adjustable by %.

Similar Question 5 (2 solutions) : height 100% in flex

Similar Question 6 (1 solutions) : CSS + flex + height 100%

Similar Question 7 (2 solutions) : Height of Flex Div Not 100%

cc